@astryxdesign/lab 0.7.6-canary.fc44bc3 → 0.7.6-canary.fda92ac

package/dist/DiffViewer/DiffViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiffViewer.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/DiffViewer.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,GAAG,EAET,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAGL,KAAK,YAAY,EAGlB,MAAM,8BAA8B,CAAC;AAOtC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,iCAAiC,CAAC;AAqBzC,OAAO,KAAK,EACV,cAAc,EAGd,iBAAiB,EAElB,MAAM,aAAa,CAAC;AAGrB,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;;OAGG;IACH,IAAI,EAAE,cAAc,CAAC;IACrB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC7D;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAClB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KACjC,IAAI,CAAC;IACV,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAq2BD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,IAAI,EACJ,QAAoB,EACpB,QAAQ,EAAE,YAAY,EACtB,aAAa,EACb,cAAqB,EACrB,SAAiB,EACjB,eAA2B,EAC3B,eAAwB,EACxB,mBAA0B,EAC1B,aAAoB,EACpB,WAAW,EAAE,eAAe,EAC5B,kBAA0B,EAC1B,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BAopBjB;yBA5qBe,UAAU"}
+{"version":3,"file":"DiffViewer.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/DiffViewer.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAQL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,GAAG,EAET,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAGL,KAAK,YAAY,EAGlB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,iCAAiC,CAAC;AAsBzC,OAAO,KAAK,EACV,cAAc,EAGd,iBAAiB,EAElB,MAAM,aAAa,CAAC;AAGrB,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;;GAGG;AACH,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B;;;OAGG;IACH,IAAI,EAAE,cAAc,CAAC;IACrB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;IAC5C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC7D;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAClB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KACjC,IAAI,CAAC;IACV,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AA++BD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,IAAI,EACJ,QAAoB,EACpB,QAAQ,EAAE,YAAY,EACtB,aAAa,EACb,cAAqB,EACrB,SAAiB,EACjB,eAA2B,EAC3B,eAAwB,EACxB,mBAA0B,EAC1B,aAAoB,EACpB,WAAW,EAAE,eAAe,EAC5B,kBAA0B,EAC1B,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACT,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,+BA0uBjB;yBAlwBe,UAAU"}

package/dist/DiffViewer/DiffViewer.js

@@ -4,7 +4,7 @@
  * @file DiffViewer.tsx
  * @input Uses React, StyleX, theme tokens, the shared CodeBlock tokenizer and
  *   syntax-theme slots (incl. the diff row slots), useScrollableArea,
- *   Token, Icon, VisuallyHidden, and the i18n translator
+ *   Token, Icon, Button, VisuallyHidden, and the i18n translator
  * @output Exports DiffViewer component, DiffViewerProps, DiffViewerViewMode,
  *   DiffViewerChangeIndicator, DiffViewerInlineHighlight
  * @position Lab implementation; read-only, syntax-highlighted file diff for
@@ -12,6 +12,8 @@
  *
  * Renders one DiffViewerFile: a file header (path, status, +/- counts, a
  * caller slot, optional disclosure) over its hunks in unified or split view.
+ * A hunk marked `isReplacedBlock` shows a labeled fold in place of its
+ * changed lines until the reader opens it.
  * Unified view is one table. Split view is two side-by-side panes (each an
  * ARIA table) whose rows share one grid's row tracks through `subgrid`, so a
  * row is as tall as its taller side while each pane scrolls sideways on its
@@ -39,12 +41,13 @@ import { Fragment, useId, useInsertionEffect, useMemo, useRef, useState } from '
 import * as stylex from '@stylexjs/stylex';
 import { ensureHighlightStyles, tokenize } from '@astryxdesign/core/CodeBlock';
 import { useScrollableArea } from '@astryxdesign/core/hooks';
+import { Button } from '@astryxdesign/core/Button';
 import { useTranslator } from '@astryxdesign/core/i18n';
 import { Icon } from '@astryxdesign/core/Icon';
 import { SyntaxTheme } from '@astryxdesign/core/theme/syntax';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { borderVars, colorVars, durationVars, easeVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars, typographyVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { focusOutlineProps, mergeProps, rtlStyles, themeProps } from '@astryxdesign/core/utils';
+import { focusOutlineProps, isRenderable, mergeProps, rtlStyles, themeProps } from '@astryxdesign/core/utils';
 import { Token } from '@astryxdesign/core/Token';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { diffInlineRanges } from "./inlineDiff.js";
@@ -134,6 +137,41 @@ function inferLanguage(path, codeLanguages) {
 // Row model
 // ---------------------------------------------------------------------------
 
+/** The control that folds a replaced block's changed lines. */
+
+/**
+ * The caller's annotation for a line, or null when it renders nothing. An
+ * annotation row is drawn only for a note that renders, so
+ * `hasThread && <Thread />` adds no empty row.
+ */
+function lineAnnotation(renderLineAnnotation, ref) {
+  const note = renderLineAnnotation(ref);
+  return isRenderable(note) ? note : null;
+}
+
+/**
+ * Replaced blocks with an annotation on one of their changed lines. Such a
+ * block starts open, so a review comment is never hidden behind the fold.
+ */
+function findAnnotatedBlocks(file, renderLineAnnotation) {
+  const blocks = new Set();
+  if (renderLineAnnotation == null) {
+    return blocks;
+  }
+  file.hunks.forEach((hunk, hunkIndex) => {
+    if (hunk.isReplacedBlock !== true) {
+      return;
+    }
+    const isAnnotated = hunk.lines.some(line => {
+      const ref = line.kind === 'context' ? null : lineRef(line, hunkIndex);
+      return ref != null && lineAnnotation(renderLineAnnotation, ref) != null;
+    });
+    if (isAnnotated) {
+      blocks.add(hunkIndex);
+    }
+  });
+  return blocks;
+}
 function lineRef(line, hunkIndex) {
   if (line.kind === 'removed') {
     return line.oldLineNumber == null ? null : {
@@ -181,44 +219,96 @@ function addInlineEmphasis(cells, granularity) {
 }
 
 /**
- * Tokenize each hunk's old and new side as continuous text, so constructs
- * that span lines (block comments, template strings) keep their paint within
- * the hunk, then hand each line the tokens of the side it renders from.
+ * Tokenize a run of hunk lines with its old and new side each as continuous
+ * text, so constructs that span lines (block comments, template strings) keep
+ * their paint within the run, and give each line the tokens of the side it
+ * renders from.
+ */
+function tokenizeRun(lines, language) {
+  if (language === 'plaintext') {
+    return lines.map(() => []);
+  }
+  const sideText = kind => lines.filter(line => line.kind !== kind).map(line => line.content).join('\n');
+  const oldTokens = tokenize(sideText('added'), language);
+  const newTokens = tokenize(sideText('removed'), language);
+  let oldIndex = 0;
+  let newIndex = 0;
+  return lines.map(line => {
+    if (line.kind === 'removed') {
+      return oldTokens[oldIndex++] ?? [];
+    }
+    if (line.kind === 'added') {
+      return newTokens[newIndex++] ?? [];
+    }
+    oldIndex++;
+    return newTokens[newIndex++] ?? [];
+  });
+}
+
+/**
+ * Build each hunk's line cells. A folded replaced block keeps only the
+ * context around it, and its changed lines are not tokenized.
  */
-function buildCells(file, language, inlineHighlight) {
+function buildCells(file, language, inlineHighlight, expandedBlocks) {
   return file.hunks.map((hunk, hunkIndex) => {
-    const oldLines = hunk.lines.filter(line => line.kind !== 'added');
-    const newLines = hunk.lines.filter(line => line.kind !== 'removed');
-    const highlight = language !== 'plaintext';
-    const oldTokens = highlight ? tokenize(oldLines.map(line => line.content).join('\n'), language) : [];
-    const newTokens = highlight ? tokenize(newLines.map(line => line.content).join('\n'), language) : [];
-    let oldIndex = 0;
-    let newIndex = 0;
     const cells = [];
-    for (const line of hunk.lines) {
-      let tokens;
-      if (line.kind === 'removed') {
-        tokens = oldTokens[oldIndex++] ?? [];
-      } else if (line.kind === 'added') {
-        tokens = newTokens[newIndex++] ?? [];
-      } else {
-        oldIndex++;
-        tokens = newTokens[newIndex++] ?? [];
-      }
-      const ref = lineRef(line, hunkIndex);
-      if (ref != null) {
-        cells.push({
-          line,
-          ref,
-          tokens,
-          emphasis: []
-        });
+    const addRun = lines => {
+      const tokens = tokenizeRun(lines, language);
+      lines.forEach((line, i) => {
+        const ref = lineRef(line, hunkIndex);
+        if (ref != null) {
+          cells.push({
+            line,
+            ref,
+            tokens: tokens[i],
+            emphasis: []
+          });
+        }
+      });
+    };
+    const changeStart = hunk.isReplacedBlock === true ? hunk.lines.findIndex(line => line.kind !== 'context') : -1;
+    if (changeStart === -1) {
+      addRun(hunk.lines);
+      if (inlineHighlight !== 'none') {
+        addInlineEmphasis(cells, inlineHighlight);
       }
+      return {
+        cells,
+        fold: null
+      };
     }
-    if (inlineHighlight !== 'none') {
-      addInlineEmphasis(cells, inlineHighlight);
+
+    // A replaced block's removed and added lines are not edits of each
+    // other, so they get no inline highlight.
+    const isExpanded = expandedBlocks.has(hunkIndex);
+    const changedLines = hunk.lines.filter(line => line.kind !== 'context').length;
+    if (isExpanded) {
+      addRun(hunk.lines);
+      const at = cells.findIndex(cell => cell.line.kind !== 'context');
+      return {
+        cells,
+        fold: {
+          hunkIndex,
+          at,
+          changedLines,
+          isExpanded
+        }
+      };
     }
-    return cells;
+    // Leading and trailing context are tokenized apart: the hidden lines
+    // between them can open or close a comment or a string.
+    addRun(hunk.lines.slice(0, changeStart));
+    const at = cells.length;
+    addRun(hunk.lines.slice(changeStart + changedLines));
+    return {
+      cells,
+      fold: {
+        hunkIndex,
+        at,
+        changedLines,
+        isExpanded
+      }
+    };
   });
 }
 function buildUnifiedRows(file, cells) {
@@ -229,13 +319,31 @@ function buildUnifiedRows(file, cells) {
       key: `h${h}`,
       header: hunk.header
     });
-    cells[h].forEach((cell, i) => {
+    const {
+      cells: hunkCells,
+      fold
+    } = cells[h];
+    hunkCells.forEach((cell, i) => {
+      if (fold != null && fold.at === i) {
+        rows.push({
+          type: 'fold',
+          key: `h${h}f`,
+          fold
+        });
+      }
       rows.push({
         type: 'line',
         key: `h${h}l${i}`,
         cell
       });
     });
+    if (fold != null && fold.at === hunkCells.length) {
+      rows.push({
+        type: 'fold',
+        key: `h${h}f`,
+        fold
+      });
+    }
   });
   return rows;
 }
@@ -252,9 +360,20 @@ function buildSplitRows(file, cells) {
       key: `h${h}`,
       header: hunk.header
     });
-    const hunkCells = cells[h];
+    const {
+      cells: hunkCells,
+      fold
+    } = cells[h];
     let i = 0;
     while (i < hunkCells.length) {
+      // The fold sits where a run of changes starts or ends, never inside one.
+      if (fold != null && fold.at === i) {
+        rows.push({
+          type: 'fold',
+          key: `h${h}f`,
+          fold
+        });
+      }
       const cell = hunkCells[i];
       if (cell.line.kind === 'context') {
         rows.push({
@@ -284,6 +403,13 @@ function buildSplitRows(file, cells) {
         });
       }
     }
+    if (fold != null && fold.at === hunkCells.length) {
+      rows.push({
+        type: 'fold',
+        key: `h${h}f`,
+        fold
+      });
+    }
   });
   return rows;
 }
@@ -764,7 +890,26 @@ export function DiffViewer({
     }
     onCollapsedChange?.(next);
   };
-  const cells = useMemo(() => buildCells(file, language, inlineHighlight), [file, language, inlineHighlight]);
+
+  // A replaced block starts folded unless one of its lines is annotated. The
+  // reader's toggles are kept per file; a new file starts over.
+  const [blockToggles, setBlockToggles] = useState(null);
+  const toggles = blockToggles?.file === file ? blockToggles.isExpanded : null;
+  const annotatedBlocks = findAnnotatedBlocks(file, renderLineAnnotation);
+  const isBlockExpanded = hunkIndex => toggles?.get(hunkIndex) ?? annotatedBlocks.has(hunkIndex);
+  const toggleBlock = hunkIndex => {
+    const next = new Map(toggles);
+    next.set(hunkIndex, !isBlockExpanded(hunkIndex));
+    setBlockToggles({
+      file,
+      isExpanded: next
+    });
+  };
+  // A key of the open blocks keeps the set stable across renders, so the
+  // cells are built again only when a block opens or closes.
+  const expandedKey = file.hunks.flatMap((hunk, hunkIndex) => hunk.isReplacedBlock === true && isBlockExpanded(hunkIndex) ? [hunkIndex] : []).join(',');
+  const expandedBlocks = useMemo(() => new Set(expandedKey === '' ? [] : expandedKey.split(',').map(Number)), [expandedKey]);
+  const cells = useMemo(() => buildCells(file, language, inlineHighlight, expandedBlocks), [file, language, inlineHighlight, expandedBlocks]);
   const unifiedRows = useMemo(() => viewMode === 'unified' ? buildUnifiedRows(file, cells) : [], [viewMode, file, cells]);
   const splitRows = useMemo(() => viewMode === 'split' ? buildSplitRows(file, cells) : [], [viewMode, file, cells]);
   let addedCount = 0;
@@ -875,6 +1020,27 @@ export function DiffViewer({
       children: cell != null && buildSpans(cell.line.content, cell.tokens, cell.emphasis, [styles.change, kind === 'added' ? styles.changeAdded : styles.changeRemoved])
     }, key);
   };
+  const renderFold = fold => /*#__PURE__*/_jsxs("span", {
+    ...{
+      0: {
+        className: "x3nfvp2 x6s0dn4 x1a02dak xjcht0a"
+      },
+      1: {
+        className: "x3nfvp2 x6s0dn4 x1a02dak xjcht0a x7wzq59 x1ybfrjj"
+      }
+    }[!!isPinned << 0],
+    children: [/*#__PURE__*/_jsx("span", {
+      children: t('@astryx.diffViewer.largeChange', {
+        count: fold.changedLines
+      })
+    }), /*#__PURE__*/_jsx(Button, {
+      size: "sm",
+      variant: "secondary",
+      label: fold.isExpanded ? t('@astryx.diffViewer.hideFullDiff') : t('@astryx.diffViewer.showFullDiff'),
+      "aria-expanded": fold.isExpanded,
+      onClick: () => toggleBlock(fold.hunkIndex)
+    })]
+  });
   const renderHunkText = header => /*#__PURE__*/_jsx("span", {
     ...{
       0: {
@@ -886,16 +1052,7 @@ export function DiffViewer({
     }[!!isPinned << 0],
     children: header
   });
-
-  // `null`, `undefined` and booleans render nothing in React, so they draw no
-  // row either; that keeps `hasThread && <Thread />` from adding empty rows.
-  const annotationFor = cell => {
-    if (cell == null || renderLineAnnotation == null) {
-      return null;
-    }
-    const note = renderLineAnnotation(cell.ref);
-    return typeof note === 'boolean' ? null : note;
-  };
+  const annotationFor = cell => cell == null || renderLineAnnotation == null ? null : lineAnnotation(renderLineAnnotation, cell.ref);
 
   // Name every column so a screen reader moving across a row hears which
   // number is which (and, in split view, which side's code it is in).
@@ -955,6 +1112,17 @@ export function DiffViewer({
               })
             }, row.key);
           }
+          if (row.type === 'fold') {
+            return /*#__PURE__*/_jsx("tr", {
+              children: /*#__PURE__*/_jsx("td", {
+                colSpan: columns,
+                ...{
+                  className: "xce4md1 xrrkdod x1yc453h x11ds9ch xv1l7n4 x9ynric x141an7d x1ltkj2j xszpfcc xykt701 xgtxpae"
+                },
+                children: renderFold(row.fold)
+              })
+            }, row.key);
+          }
           const note = annotationFor(row.cell);
           return /*#__PURE__*/_jsxs(Fragment, {
             children: [/*#__PURE__*/_jsxs("tr", {
@@ -1021,7 +1189,7 @@ export function DiffViewer({
     };
   };
   const renderSplit = () => {
-    const items = splitRows.map(row => row.type === 'hunk' ? {
+    const items = splitRows.map(row => row.type !== 'pair' ? {
       row,
       oldNote: null,
       newNote: null
@@ -1033,7 +1201,7 @@ export function DiffViewer({
       newNote: annotationFor(row.new)
     });
     const hasSizer = !isWrapped;
-    const sizerText = hasSizer ? widestLine(cells.flatMap(hunkCells => hunkCells.map(cell => cell.line.content))) : '';
+    const sizerText = hasSizer ? widestLine(cells.flatMap(hunk => hunk.cells.map(cell => cell.line.content))) : '';
     const rowCount = 1 + (hasSizer ? 1 : 0) + items.reduce((count, item) => count + 1 + (item.oldNote != null || item.newNote != null ? 1 : 0), 0);
     const columns = `${hasLineNumbers ? `${gutter} ` : ''}${markerWidth} ${isWrapped ? 'minmax(0, 1fr)' : '1fr'}`;
     const markerPin = hasLineNumbers ? gutter : '0px';
@@ -1084,6 +1252,41 @@ export function DiffViewer({
           }, row.key));
           continue;
         }
+        if (row.type === 'fold') {
+          // Only the old side holds the control; the new side keeps its row
+          // as tall and gives its own table's readers the label.
+          rows.push(/*#__PURE__*/_jsx("div", {
+            role: "row",
+            ...{
+              className: "xrvj5dj x1osaytk x4w6khx"
+            },
+            children: /*#__PURE__*/_jsx("div", {
+              role: "cell",
+              ...{
+                0: {
+                  className: "xce4md1 xrrkdod x1yc453h x11ds9ch xv1l7n4 x9ynric x141an7d x1ltkj2j xszpfcc xykt701 xgtxpae x1osaytk"
+                },
+                1: {
+                  className: "xce4md1 xrrkdod x1yc453h x11ds9ch xv1l7n4 x9ynric x141an7d x1ltkj2j xszpfcc xykt701 xgtxpae x1osaytk x126k92a x1lldw8n xj0a0fe x5ujdhh"
+                }
+              }[!!isWrapped << 0],
+              children: isOld ? renderFold(row.fold) : /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx("span", {
+                  "aria-hidden": "true",
+                  ...{
+                    className: "xlshs6z"
+                  },
+                  children: renderFold(row.fold)
+                }), /*#__PURE__*/_jsx(VisuallyHidden, {
+                  children: t('@astryx.diffViewer.largeChange', {
+                    count: row.fold.changedLines
+                  })
+                })]
+              })
+            })
+          }, row.key));
+          continue;
+        }
         const cell = isOld ? row.old : row.new;
         rows.push(/*#__PURE__*/_jsxs("div", {
           role: "row"

package/dist/DiffViewer/createDiffFile.d.ts

@@ -8,8 +8,8 @@
  *
  * Shared leading and trailing lines are matched without a search. The minimal
  * search over the rest stops after MAX_EDIT_DISTANCE changed lines, so memory
- * stays bounded for any input; a middle that differs more than that is shown
- * as one replaced block rather than a minimal diff.
+ * stays bounded for any input; a middle that differs more than that becomes
+ * one replaced block, marked with `isReplacedBlock` on its hunk.
  *
  * SYNC: When modified, update:
  * - /packages/lab/src/DiffViewer/createDiffFile.test.ts

package/dist/DiffViewer/createDiffFile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDiffFile.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/createDiffFile.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,qBAAqB;IACpC,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAiJD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,aAAa,EACtB,YAAgB,GACjB,EAAE,qBAAqB,GAAG,cAAc,CA0GxC"}
+{"version":3,"file":"createDiffFile.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/createDiffFile.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,qBAAqB;IACpC,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0JD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,aAAa,EACtB,YAAgB,GACjB,EAAE,qBAAqB,GAAG,cAAc,CA4GxC"}

package/dist/DiffViewer/createDiffFile.js

@@ -10,8 +10,8 @@
  *
  * Shared leading and trailing lines are matched without a search. The minimal
  * search over the rest stops after MAX_EDIT_DISTANCE changed lines, so memory
- * stays bounded for any input; a middle that differs more than that is shown
- * as one replaced block rather than a minimal diff.
+ * stays bounded for any input; a middle that differs more than that becomes
+ * one replaced block, marked with `isReplacedBlock` on its hunk.
  *
  * SYNC: When modified, update:
  * - /packages/lab/src/DiffViewer/createDiffFile.test.ts
@@ -35,7 +35,6 @@ function splitLines(value) {
  * megabytes; past it the changed middle is shown as one replaced block.
  */
 const MAX_EDIT_DISTANCE = 2000;
-
 /**
  * Line edit script from `a` to `b`. Shared leading and trailing lines are
  * context without a search; the middle uses Myers' O(ND) shortest edit script,
@@ -61,7 +60,10 @@ function diffLines(a, b) {
       b: i
     });
   }
-  const middle = myers(a, b, head, tailA, tailB);
+  // When one side of the middle is empty, adding or removing the other side
+  // is already the minimal script.
+  const isOneSided = tailA === head || tailB === head;
+  const middle = isOneSided ? null : myers(a, b, head, tailA, tailB);
   if (middle != null) {
     // A loop, not a spread: one call argument per op overflows the stack on
     // long inputs.
@@ -89,7 +91,10 @@ function diffLines(a, b) {
       b: tailB + i
     });
   }
-  return ops;
+  return {
+    ops,
+    isReplacedBlock: middle == null && !isOneSided
+  };
 }
 
 /**
@@ -197,7 +202,10 @@ export function createDiffFile({
   }
   const a = splitLines(oldValue);
   const b = splitLines(newValue);
-  const ops = diffLines(a, b);
+  const {
+    ops,
+    isReplacedBlock
+  } = diffLines(a, b);
   const changed = [];
   ops.forEach((op, i) => {
     if (op.kind !== 'context') {
@@ -269,7 +277,11 @@ export function createDiffFile({
       oldLines: oldCount,
       newStart,
       newLines: newCount,
-      lines
+      lines,
+      // A replaced block is the only change, so it fills the only hunk.
+      ...(isReplacedBlock ? {
+        isReplacedBlock: true
+      } : {})
     });
     g = h;
   }

package/dist/DiffViewer/diffTypes.d.ts

@@ -39,6 +39,13 @@ export interface DiffViewerHunk {
     newStart: number;
     newLines: number;
     lines: DiffViewerLine[];
+    /**
+     * True when the change was too large to compare line by line, so the hunk
+     * lists every old line as removed and every new line as added instead of a
+     * minimal diff. `createDiffFile` sets it; DiffViewer folds the changed lines
+     * behind a labeled control that shows them on request.
+     */
+    isReplacedBlock?: boolean;
 }
 /** One file's changes. */
 export interface DiffViewerFile {

package/dist/DiffViewer/diffTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diffTypes.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/diffTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,oEAAoE;AACpE,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjE,uCAAuC;AACvC,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEhF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;AAE3C,mEAAmE;AACnE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sEAAsE;IACtE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,0BAA0B;AAC1B,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,sEAAsE;IACtE,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"diffTypes.d.ts","sourceRoot":"","sources":["../../src/DiffViewer/diffTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,oEAAoE;AACpE,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjE,uCAAuC;AACvC,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEhF;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;AAE3C,mEAAmE;AACnE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sEAAsE;IACtE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,0BAA0B;AAC1B,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,+DAA+D;IAC/D,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,sEAAsE;IACtE,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.6-canary.fc44bc3",
+  "version": "0.7.6-canary.fda92ac",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.6-canary.fc44bc3",
+    "@astryxdesign/core": "0.7.6-canary.fda92ac",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,9 +59,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.6-canary.fc44bc3",
-    "@astryxdesign/cli": "0.7.6-canary.fc44bc3",
-    "@astryxdesign/interaction-harness": "0.7.6-canary.fc44bc3",
+    "@astryxdesign/a11y-spec": "0.7.6-canary.fda92ac",
+    "@astryxdesign/cli": "0.7.6-canary.fda92ac",
+    "@astryxdesign/interaction-harness": "0.7.6-canary.fda92ac",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/DiffViewer/DiffViewer.doc.mjs

@@ -30,7 +30,7 @@ export const docs = {
 
   usage: {
     description:
-      'Read-only, syntax-highlighted diff of one file for code review surfaces. Renders a file header (path, Added/Deleted/Renamed token, +/− line counts, a headerEnd slot, and an optional disclosure) over the file\'s hunks in unified or split (side-by-side) view. Rows use the same syntax-theme diff slots as CodeBlock with isDiff, so one syntax theme styles both. renderLineAnnotation adds a full-width row under any line (for review comments) and onLineNumberClick turns line numbers into buttons. Build the file model with parseUnifiedDiff(patch), which returns one file per file in a git or diff -u patch, or with createDiffFile({oldValue, newValue}) when you hold two versions of a text. Display options cover how a change is marked (classic +/− glyphs, bars, or none), whether changed rows are tinted, and word- or character-level highlighting of what changed inside each removed/added line pair. Each changed line carries a visually hidden "Added"/"Removed" label, so the change reads without colour in every mode. Unwrapped, line numbers and change indicators stay pinned while the code scrolls; in split view each side is its own scroller, so the split stays fixed at half and half, the sides scroll sideways in lockstep, and a row is as tall as its taller side. While code overflows sideways, sideways overscroll is off, so trackpads neither bounce past a line nor swipe the browser back. In right-to-left pages the hunk area stays left-to-right, like a code editor: annotation content reads in the page direction, and annotation rows scroll with the code. Rows are plain DOM with no virtualization: collapse or window very large files.',
+      'Read-only, syntax-highlighted diff of one file for code review surfaces. Renders a file header (path, Added/Deleted/Renamed token, +/− line counts, a headerEnd slot, and an optional disclosure) over the file\'s hunks in unified or split (side-by-side) view. Rows use the same syntax-theme diff slots as CodeBlock with isDiff, so one syntax theme styles both. renderLineAnnotation adds a full-width row under any line (for review comments) and onLineNumberClick turns line numbers into buttons. Build the file model with parseUnifiedDiff(patch), which returns one file per file in a git or diff -u patch, or with createDiffFile({oldValue, newValue}) when you hold two versions of a text. Display options cover how a change is marked (classic +/− glyphs, bars, or none), whether changed rows are tinted, and word- or character-level highlighting of what changed inside each removed/added line pair. Each changed line carries a visually hidden "Added"/"Removed" label, so the change reads without colour in every mode. Unwrapped, line numbers and change indicators stay pinned while the code scrolls; in split view each side is its own scroller, so the split stays fixed at half and half, the sides scroll sideways in lockstep, and a row is as tall as its taller side. While code overflows sideways, sideways overscroll is off, so trackpads neither bounce past a line nor swipe the browser back. In right-to-left pages the hunk area stays left-to-right, like a code editor: annotation content reads in the page direction, and annotation rows scroll with the code. When a change is too large to compare line by line, createDiffFile marks its hunk with isReplacedBlock: it lists every old line as removed and every new line as added. DiffViewer folds those lines behind a "Large change: N lines" row, where N counts the block\'s removed plus added lines, with a Show full diff button. A block opens by itself when one of its lines has an annotation, so no review comment is hidden. Rows are plain DOM with no virtualization: collapse or window very large files.',
     bestPractices: [
       {
         guidance: true,