@adecore/editor-react 0.31.12 → 0.33.0

package/dist/DiffView.js

@@ -1,203 +1,570 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { parseChord } from '@adecore/editor/keymap';
 import { diffDisplay, diffSplit } from '@adecore/merge';
 import { wordMarks } from './diff-wordmarks.js';
-import { DiffOverlays } from './diff-overlays.js';
-import { SplitDiffView } from './SplitDiffView.js';
+import { DiffOverlays } from "./diff-overlays.js";
+import { SplitDiffView } from "./SplitDiffView.js";
 import { LineActionHost, RowHost } from './row-host.js';
 import { DEFAULT_UNFOLD_LIMITS, expandDiff } from './diff-expansion.js';
-function UnifiedDiffView({ engine, document, display, unfold, blocked, theme, tokens, wrap = true, fill = false, maxHeight, label, className, ref, onMount }) {
-    const { t } = useTranslation('editor');
-    const emphasis = useMemo(() => wordMarks(document), [document]);
-    const element = useRef(null);
-    const current = useRef({ display, tokens, theme, wrap, label });
-    const applied = useRef({ theme, wrap, label });
-    const [mounted, setMounted] = useState(null);
-    const [height, setHeight] = useState(0);
-    useLayoutEffect(() => {
-        current.current = { display, tokens, theme, wrap, label };
-    });
-    useLayoutEffect(() => {
-        const host = element.current;
-        if (host === null) {
-            return;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function UnifiedDiffView(t0) {
+  const $ = _c(69);
+  const {
+    engine,
+    document,
+    display,
+    unfold,
+    blocked,
+    theme,
+    tokens,
+    wrap: t1,
+    fill: t2,
+    maxHeight,
+    label,
+    className,
+    ref,
+    onMount
+  } = t0;
+  const wrap = t1 === undefined ? true : t1;
+  const fill = t2 === undefined ? false : t2;
+  const {
+    t
+  } = useTranslation("editor");
+  let t3;
+  if ($[0] !== document) {
+    t3 = wordMarks(document);
+    $[0] = document;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const emphasis = t3;
+  const element = useRef(null);
+  let t4;
+  if ($[2] !== display || $[3] !== label || $[4] !== theme || $[5] !== tokens || $[6] !== wrap) {
+    t4 = {
+      display,
+      tokens,
+      theme,
+      wrap,
+      label
+    };
+    $[2] = display;
+    $[3] = label;
+    $[4] = theme;
+    $[5] = tokens;
+    $[6] = wrap;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const current = useRef(t4);
+  let t5;
+  if ($[8] !== label || $[9] !== theme || $[10] !== wrap) {
+    t5 = {
+      theme,
+      wrap,
+      label
+    };
+    $[8] = label;
+    $[9] = theme;
+    $[10] = wrap;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const applied = useRef(t5);
+  const [mounted, setMounted] = useState(null);
+  const [height, setHeight] = useState(0);
+  let t6;
+  if ($[12] !== display || $[13] !== label || $[14] !== theme || $[15] !== tokens || $[16] !== wrap) {
+    t6 = () => {
+      current.current = {
+        display,
+        tokens,
+        theme,
+        wrap,
+        label
+      };
+    };
+    $[12] = display;
+    $[13] = label;
+    $[14] = theme;
+    $[15] = tokens;
+    $[16] = wrap;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  useLayoutEffect(t6);
+  let t7;
+  let t8;
+  if ($[18] !== engine) {
+    t7 = () => {
+      const host = element.current;
+      if (host === null) {
+        return;
+      }
+      const initial = current.current;
+      const editor = engine.mount(host, {
+        text: initial.display.text,
+        theme: initial.theme,
+        wrap: initial.wrap,
+        label: initial.label,
+        readOnly: true,
+        guides: false,
+        foldOutline: "off",
+        folding: false,
+        handBack: [parseChord("Mod+Enter")]
+      });
+      applied.current = {
+        theme: initial.theme,
+        wrap: initial.wrap,
+        label: initial.label
+      };
+      editor.setBlocks([]);
+      editor.setLineTokens(line => {
+        const {
+          display: display_0,
+          tokens: tokens_0
+        } = current.current;
+        const row = display_0.rows[line];
+        return row === undefined ? null : tokens_0?.get(row.new === undefined ? "old" : "new", (row.new ?? row.old).index);
+      });
+      setMounted({
+        engine,
+        editor,
+        rows: new RowHost(editor, "diff-gaps"),
+        actions: new LineActionHost(editor, "diff-status")
+      });
+      const measure = () => setHeight(editor.getContentHeight());
+      const stop = editor.onViewChange(measure);
+      measure();
+      return () => {
+        stop();
+        editor.dispose();
+      };
+    };
+    t8 = [engine];
+    $[18] = engine;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t7 = $[19];
+    t8 = $[20];
+  }
+  useLayoutEffect(t7, t8);
+  let t10;
+  let t9;
+  if ($[21] !== display || $[22] !== emphasis || $[23] !== engine || $[24] !== mounted) {
+    t9 = () => {
+      if (mounted === null || mounted.engine !== engine) {
+        return;
+      }
+      const {
+        editor: editor_0,
+        rows,
+        actions
+      } = mounted;
+      editor_0.setText(display.text);
+      editor_0.setLineNumbers(line_0 => {
+        const row_0 = current.current.display.rows[line_0];
+        return row_0 === undefined ? null : String((row_0.new ?? row_0.old).number);
+      });
+      const highlights = [];
+      for (const [index, row_1] of display.rows.entries()) {
+        if (row_1.change !== "delete" && row_1.change !== "insert") {
+          continue;
         }
-        const initial = current.current;
-        const editor = engine.mount(host, {
-            text: initial.display.text,
-            theme: initial.theme,
-            wrap: initial.wrap,
-            label: initial.label,
-            readOnly: true,
-            guides: false,
-            foldOutline: 'off',
-            folding: false,
-            // Prompt cards use this chord for their primary action; a read-only review has no split-line action.
-            handBack: [parseChord('Mod+Enter')]
-        });
-        applied.current = { theme: initial.theme, wrap: initial.wrap, label: initial.label };
-        editor.setBlocks([]);
-        editor.setLineTokens((line) => {
-            const { display, tokens } = current.current;
-            const row = display.rows[line];
-            return row === undefined ? null : tokens?.get(row.new === undefined ? 'old' : 'new', (row.new ?? row.old).index);
+        const removed = row_1.change === "delete";
+        highlights.push({
+          startLine: index + 1,
+          endLine: index + 1,
+          color: removed ? "--editor-deleted" : "--editor-added",
+          bar: removed ? "hatched" : "solid",
+          emphasis: [(removed ? emphasis.old.get(row_1.old.index) : emphasis.new.get(row_1.new.index)) ?? []]
         });
-        setMounted({ engine, editor, rows: new RowHost(editor, 'diff-gaps'), actions: new LineActionHost(editor, 'diff-status') });
-        const measure = () => setHeight(editor.getContentHeight());
-        const stop = editor.onViewChange(measure);
-        measure();
-        return () => {
-            stop();
-            editor.dispose();
+      }
+      editor_0.setLineHighlights(highlights);
+      editor_0.setChangeMarks(highlights.map(_temp));
+      rows.set(display.gaps.map(t11 => {
+        const {
+          before,
+          row: row_2
+        } = t11;
+        return {
+          id: `gap-${row_2.id}`,
+          line: Math.min(before, Math.max(0, display.rows.length - 1)),
+          placement: before < display.rows.length ? "above" : "below",
+          height: 32
         };
-    }, [engine]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.engine !== engine) {
-            return;
-        }
-        const { editor, rows, actions } = mounted;
-        editor.setText(display.text);
-        editor.setLineNumbers((line) => {
-            const row = current.current.display.rows[line];
-            return row === undefined ? null : String((row.new ?? row.old).number);
-        });
-        const highlights = [];
-        for (const [index, row] of display.rows.entries()) {
-            if (row.change !== 'delete' && row.change !== 'insert') {
-                continue;
-            }
-            const removed = row.change === 'delete';
-            highlights.push({
-                startLine: index + 1,
-                endLine: index + 1,
-                color: removed ? '--editor-deleted' : '--editor-added',
-                bar: removed ? 'hatched' : 'solid',
-                emphasis: [(removed ? emphasis.old.get(row.old.index) : emphasis.new.get(row.new.index)) ?? []]
-            });
+      }));
+      actions.set(display.rows.flatMap(_temp2));
+    };
+    t10 = [mounted, engine, display, emphasis];
+    $[21] = display;
+    $[22] = emphasis;
+    $[23] = engine;
+    $[24] = mounted;
+    $[25] = t10;
+    $[26] = t9;
+  } else {
+    t10 = $[25];
+    t9 = $[26];
+  }
+  useLayoutEffect(t9, t10);
+  let t11;
+  let t12;
+  if ($[27] !== display || $[28] !== engine || $[29] !== mounted || $[30] !== t) {
+    t11 = () => {
+      if (mounted === null || mounted.engine !== engine) {
+        return;
+      }
+      mounted.editor.setLineLabels(line_2 => {
+        const row_4 = display.rows[line_2];
+        if (row_4?.change === "delete") {
+          return t("diff.removed", {
+            number: row_4.old.number
+          });
         }
-        editor.setLineHighlights(highlights);
-        editor.setChangeMarks(highlights.map((highlight) => ({
-            startLine: highlight.startLine,
-            endLine: highlight.endLine,
-            kind: highlight.bar === 'hatched' ? 'deleted' : 'added'
-        })));
-        rows.set(display.gaps.map(({ before, row }) => ({
-            id: `gap-${row.id}`,
-            line: Math.min(before, Math.max(0, display.rows.length - 1)),
-            placement: before < display.rows.length ? 'above' : 'below',
-            height: 32
-        })));
-        actions.set(display.rows.flatMap((row, line) => (row.noNewline === undefined ? [] : [{ id: `no-newline-${line}`, line }])));
-    }, [mounted, engine, display, emphasis]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.engine !== engine) {
-            return;
+        if (row_4?.change === "insert") {
+          return t("diff.added", {
+            number: row_4.new.number
+          });
         }
-        // The color of a changed line is not the only thing that says so: the gutter carries a sentence with the numbers it reads from.
-        mounted.editor.setLineLabels((line) => {
-            const row = display.rows[line];
-            if (row?.change === 'delete') {
-                return t('diff.removed', { number: row.old.number });
-            }
-            if (row?.change === 'insert') {
-                return t('diff.added', { number: row.new.number });
-            }
-            return row?.old !== undefined && row.new !== undefined ? t('diff.unchanged', { old: row.old.number, new: row.new.number }) : null;
+        return row_4?.old !== undefined && row_4.new !== undefined ? t("diff.unchanged", {
+          old: row_4.old.number,
+          new: row_4.new.number
+        }) : null;
+      });
+    };
+    t12 = [mounted, engine, display, t];
+    $[27] = display;
+    $[28] = engine;
+    $[29] = mounted;
+    $[30] = t;
+    $[31] = t11;
+    $[32] = t12;
+  } else {
+    t11 = $[31];
+    t12 = $[32];
+  }
+  useLayoutEffect(t11, t12);
+  let t13;
+  let t14;
+  if ($[33] !== engine || $[34] !== label || $[35] !== mounted || $[36] !== theme || $[37] !== wrap) {
+    t13 = () => {
+      if (mounted === null || mounted.engine !== engine) {
+        return;
+      }
+      const previous = applied.current;
+      if (previous.theme !== theme) {
+        mounted.editor.setTheme(theme);
+      }
+      if (previous.wrap !== wrap) {
+        mounted.editor.setWrap(wrap);
+      }
+      if (previous.label !== label) {
+        mounted.editor.setLabel(label);
+      }
+      applied.current = {
+        theme,
+        wrap,
+        label
+      };
+    };
+    t14 = [mounted, engine, theme, wrap, label];
+    $[33] = engine;
+    $[34] = label;
+    $[35] = mounted;
+    $[36] = theme;
+    $[37] = wrap;
+    $[38] = t13;
+    $[39] = t14;
+  } else {
+    t13 = $[38];
+    t14 = $[39];
+  }
+  useLayoutEffect(t13, t14);
+  let t15;
+  if ($[40] !== engine || $[41] !== mounted || $[42] !== tokens) {
+    t15 = () => {
+      if (mounted === null || mounted.engine !== engine) {
+        return;
+      }
+      const refresh = () => {
+        mounted.editor.setLineTokens(line_3 => {
+          const row_5 = current.current.display.rows[line_3];
+          return row_5 === undefined ? null : current.current.tokens?.get(row_5.new === undefined ? "old" : "new", (row_5.new ?? row_5.old).index);
         });
-    }, [mounted, engine, display, t]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.engine !== engine) {
-            return;
+      };
+      refresh();
+      const ownerWindow = element.current?.ownerDocument.defaultView;
+      let pending = false;
+      let stopped = false;
+      let frame;
+      const schedule = () => {
+        if (pending) {
+          return;
         }
-        const previous = applied.current;
-        if (previous.theme !== theme) {
-            mounted.editor.setTheme(theme);
-        }
-        if (previous.wrap !== wrap) {
-            mounted.editor.setWrap(wrap);
-        }
-        if (previous.label !== label) {
-            mounted.editor.setLabel(label);
-        }
-        applied.current = { theme, wrap, label };
-    }, [mounted, engine, theme, wrap, label]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.engine !== engine) {
-            return;
-        }
-        const refresh = () => {
-            mounted.editor.setLineTokens((line) => {
-                const row = current.current.display.rows[line];
-                return row === undefined ? null : current.current.tokens?.get(row.new === undefined ? 'old' : 'new', (row.new ?? row.old).index);
-            });
-        };
-        refresh();
-        const ownerWindow = element.current?.ownerDocument.defaultView;
-        let pending = false;
-        let stopped = false;
-        let frame;
-        const schedule = () => {
-            if (pending) {
-                return;
-            }
-            pending = true;
-            const paint = () => {
-                pending = false;
-                if (!stopped) {
-                    refresh();
-                }
-            };
-            if (ownerWindow?.requestAnimationFrame !== undefined) {
-                frame = ownerWindow.requestAnimationFrame(paint);
-            }
-            else {
-                queueMicrotask(paint);
-            }
-        };
-        const stop = tokens?.subscribe(schedule);
-        return () => {
-            stopped = true;
-            stop?.();
-            if (frame !== undefined) {
-                ownerWindow?.cancelAnimationFrame?.(frame);
-            }
+        pending = true;
+        const paint = () => {
+          pending = false;
+          if (!stopped) {
+            refresh();
+          }
         };
-    }, [mounted, engine, tokens, display]);
-    useLayoutEffect(() => {
-        if (mounted !== null && mounted.engine === engine) {
-            return onMount?.(mounted.editor);
+        if (ownerWindow?.requestAnimationFrame !== undefined) {
+          frame = ownerWindow.requestAnimationFrame(paint);
+        } else {
+          queueMicrotask(paint);
         }
-    }, [mounted, engine, onMount]);
-    const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
-    return (_jsxs("div", { className: `adecore-editor-diff ${className ?? ''}`, ref: ref, "data-scroll": fill || height > limit, style: { position: 'relative', minHeight: 0, height: fill ? '100%' : Math.min(height, limit) }, children: [_jsx("div", { ref: element, style: { position: 'absolute', inset: 0 } }), mounted !== null && mounted.engine === engine && _jsx(DiffOverlays, { mounted: mounted, display: display, unfold: unfold, blocked: blocked })] }));
+      };
+      const stop_0 = tokens?.subscribe(schedule);
+      return () => {
+        stopped = true;
+        stop_0?.();
+        if (frame !== undefined) {
+          ownerWindow?.cancelAnimationFrame?.(frame);
+        }
+      };
+    };
+    $[40] = engine;
+    $[41] = mounted;
+    $[42] = tokens;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  let t16;
+  if ($[44] !== display || $[45] !== engine || $[46] !== mounted || $[47] !== tokens) {
+    t16 = [mounted, engine, tokens, display];
+    $[44] = display;
+    $[45] = engine;
+    $[46] = mounted;
+    $[47] = tokens;
+    $[48] = t16;
+  } else {
+    t16 = $[48];
+  }
+  useLayoutEffect(t15, t16);
+  let t17;
+  let t18;
+  if ($[49] !== engine || $[50] !== mounted || $[51] !== onMount) {
+    t17 = () => {
+      if (mounted !== null && mounted.engine === engine) {
+        return onMount?.(mounted.editor);
+      }
+    };
+    t18 = [mounted, engine, onMount];
+    $[49] = engine;
+    $[50] = mounted;
+    $[51] = onMount;
+    $[52] = t17;
+    $[53] = t18;
+  } else {
+    t17 = $[52];
+    t18 = $[53];
+  }
+  useLayoutEffect(t17, t18);
+  const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
+  const t19 = `adecore-editor-diff ${className ?? ""}`;
+  const t20 = fill || height > limit;
+  const t21 = fill ? "100%" : Math.min(height, limit);
+  let t22;
+  if ($[54] !== t21) {
+    t22 = {
+      position: "relative",
+      minHeight: 0,
+      height: t21
+    };
+    $[54] = t21;
+    $[55] = t22;
+  } else {
+    t22 = $[55];
+  }
+  let t23;
+  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = /*#__PURE__*/_jsx("div", {
+      ref: element,
+      style: {
+        position: "absolute",
+        inset: 0
+      }
+    });
+    $[56] = t23;
+  } else {
+    t23 = $[56];
+  }
+  let t24;
+  if ($[57] !== blocked || $[58] !== display || $[59] !== engine || $[60] !== mounted || $[61] !== unfold) {
+    t24 = mounted !== null && mounted.engine === engine && /*#__PURE__*/_jsx(DiffOverlays, {
+      mounted: mounted,
+      display: display,
+      unfold: unfold,
+      blocked: blocked
+    });
+    $[57] = blocked;
+    $[58] = display;
+    $[59] = engine;
+    $[60] = mounted;
+    $[61] = unfold;
+    $[62] = t24;
+  } else {
+    t24 = $[62];
+  }
+  let t25;
+  if ($[63] !== ref || $[64] !== t19 || $[65] !== t20 || $[66] !== t22 || $[67] !== t24) {
+    t25 = /*#__PURE__*/_jsxs("div", {
+      className: t19,
+      ref: ref,
+      "data-scroll": t20,
+      style: t22,
+      children: [t23, t24]
+    });
+    $[63] = ref;
+    $[64] = t19;
+    $[65] = t20;
+    $[66] = t22;
+    $[67] = t24;
+    $[68] = t25;
+  } else {
+    t25 = $[68];
+  }
+  return t25;
+}
+function _temp2(row_3, line_1) {
+  return row_3.noNewline === undefined ? [] : [{
+    id: `no-newline-${line_1}`,
+    line: line_1
+  }];
+}
+function _temp(highlight) {
+  return {
+    startLine: highlight.startLine,
+    endLine: highlight.endLine,
+    kind: highlight.bar === "hatched" ? "deleted" : "added"
+  };
 }
 export function DiffView(props) {
-    const { document, unfoldLimits = DEFAULT_UNFOLD_LIMITS } = props;
-    const [expanded, setExpanded] = useState(() => ({
-        document,
-        gaps: new Map(),
-        blocked: new Set()
-    }));
-    const gaps = expanded.document === document ? expanded.gaps : undefined;
-    const blocked = expanded.document === document ? expanded.blocked : new Set();
-    const projection = useMemo(() => (props.layout === 'split' ? diffSplit(document, gaps) : diffDisplay(document, gaps)), [props.layout, document, gaps]);
-    const unfold = (id) => setExpanded((previous) => {
-        const gaps = previous.document === document ? previous.gaps : new Map();
-        const next = expandDiff(document, gaps, id, unfoldLimits);
-        return {
+  const $ = _c(28);
+  const {
+    document,
+    unfoldLimits: t0
+  } = props;
+  const unfoldLimits = t0 === undefined ? DEFAULT_UNFOLD_LIMITS : t0;
+  let t1;
+  if ($[0] !== document) {
+    t1 = () => ({
+      document,
+      gaps: new Map(),
+      blocked: new Set()
+    });
+    $[0] = document;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [expanded, setExpanded] = useState(t1);
+  const gaps = expanded.document === document ? expanded.gaps : undefined;
+  let t2;
+  if ($[2] !== document || $[3] !== expanded.blocked || $[4] !== expanded.document) {
+    t2 = expanded.document === document ? expanded.blocked : new Set();
+    $[2] = document;
+    $[3] = expanded.blocked;
+    $[4] = expanded.document;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const blocked = t2;
+  let projection;
+  let t3;
+  let unfold;
+  if ($[6] !== blocked || $[7] !== document || $[8] !== gaps || $[9] !== props || $[10] !== unfoldLimits) {
+    t3 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      projection = props.layout === "split" ? diffSplit(document, gaps) : diffDisplay(document, gaps);
+      let t4;
+      if ($[14] !== document || $[15] !== unfoldLimits) {
+        t4 = id => setExpanded(previous => {
+          const gaps_0 = previous.document === document ? previous.gaps : new Map();
+          const next = expandDiff(document, gaps_0, id, unfoldLimits);
+          return {
             document,
             gaps: next,
-            blocked: new Set([...(previous.document === document ? previous.blocked : []), ...(next === gaps ? [id] : [])])
-        };
-    });
-    if ('aligned' in projection && projection.old.lines.length > 0 && projection.new.lines.length > 0) {
-        const visibleRows = projection.aligned.reduce((count, row) => count + (row.kind === 'gap' ? 0 : row.row.change === 'pair' ? 2 : 1), 0);
+            blocked: new Set([...(previous.document === document ? previous.blocked : []), ...(next === gaps_0 ? [id] : [])])
+          };
+        });
+        $[14] = document;
+        $[15] = unfoldLimits;
+        $[16] = t4;
+      } else {
+        t4 = $[16];
+      }
+      unfold = t4;
+      if ("aligned" in projection && projection.old.lines.length > 0 && projection.new.lines.length > 0) {
+        const visibleRows = projection.aligned.reduce(_temp3, 0);
         const wrap = props.wrap !== false && visibleRows <= (props.splitWrapLimit ?? 2000);
-        return _jsx(SplitDiffView, { ...props, wrap: wrap, display: projection, unfold: unfold, blocked: blocked });
+        let t5;
+        if ($[17] !== blocked || $[18] !== projection || $[19] !== props || $[20] !== unfold || $[21] !== wrap) {
+          t5 = /*#__PURE__*/_jsx(SplitDiffView, {
+            ...props,
+            wrap: wrap,
+            display: projection,
+            unfold: unfold,
+            blocked: blocked
+          });
+          $[17] = blocked;
+          $[18] = projection;
+          $[19] = props;
+          $[20] = unfold;
+          $[21] = wrap;
+          $[22] = t5;
+        } else {
+          t5 = $[22];
+        }
+        t3 = t5;
+        break bb0;
+      }
     }
-    // An absent side has no selectable text; keep additions and deletions in the unified editor.
-    const display = 'aligned' in projection ? (projection.old.lines.length > 0 ? projection.old : projection.new) : projection;
-    return _jsx(UnifiedDiffView, { ...props, display: display, unfold: unfold, blocked: blocked });
+    $[6] = blocked;
+    $[7] = document;
+    $[8] = gaps;
+    $[9] = props;
+    $[10] = unfoldLimits;
+    $[11] = projection;
+    $[12] = t3;
+    $[13] = unfold;
+  } else {
+    projection = $[11];
+    t3 = $[12];
+    unfold = $[13];
+  }
+  if (t3 !== Symbol.for("react.early_return_sentinel")) {
+    return t3;
+  }
+  const display = "aligned" in projection ? projection.old.lines.length > 0 ? projection.old : projection.new : projection;
+  let t4;
+  if ($[23] !== blocked || $[24] !== display || $[25] !== props || $[26] !== unfold) {
+    t4 = /*#__PURE__*/_jsx(UnifiedDiffView, {
+      ...props,
+      display: display,
+      unfold: unfold,
+      blocked: blocked
+    });
+    $[23] = blocked;
+    $[24] = display;
+    $[25] = props;
+    $[26] = unfold;
+    $[27] = t4;
+  } else {
+    t4 = $[27];
+  }
+  return t4;
 }
+function _temp3(count, row) {
+  return count + (row.kind === "gap" ? 0 : row.row.change === "pair" ? 2 : 1);
+}