@lvce-editor/static-server 0.88.0 → 0.89.1

package/static/{684b9f1 → d7a85a3}/packages/diff-view/dist/diffViewWorkerMain.js

@@ -1117,10 +1117,14 @@ const create$1 = rpcId => {
   };
 };
 
+const Button$1 = 1;
 const Div = 4;
+const Input = 6;
 const Span = 8;
 const Text = 12;
+const Img = 17;
 const A = 53;
+const TextArea = 62;
 const Reference = 100;
 
 const Button = 'event.button';
@@ -1129,9 +1133,18 @@ const ClientY = 'event.clientY';
 const DeltaMode = 'event.deltaMode';
 const DeltaY = 'event.deltaY';
 const TargetName = 'event.target.name';
-const TargetValue = 'event.target.value';
 
-const User = 1;
+const Backspace = 1;
+const Enter = 3;
+const End = 255;
+const Home = 12;
+const LeftArrow = 13;
+const UpArrow = 14;
+const RightArrow = 15;
+const DownArrow = 16;
+const Delete = 18;
+
+const User$1 = 1;
 
 const ErrorWorker = 3308;
 const ExtensionHostWorker = 44;
@@ -1141,46 +1154,63 @@ const IconThemeWorker = 7009;
 const MarkdownWorker = 300;
 const RendererWorker = 1;
 
+const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
 const {
-  invoke: invoke$5,
+  invoke: invoke$7,
   set: set$8
 } = create$1(218_933);
 
 const {
-  invoke: invoke$4,
+  invoke: invoke$6,
   set: set$7
 } = create$1(ErrorWorker);
 
 const {
-  invoke: invoke$3,
+  invoke: invoke$5,
   set: set$6
 } = create$1(ExtensionHostWorker);
 
 const {
-  invoke: invoke$2,
+  invoke: invoke$4,
   set: set$5
 } = create$1(ExtensionManagementWorker);
 
 const {
-  invoke: invoke$1,
+  invoke: invoke$3,
   set: set$4
 } = create$1(FileSystemWorker);
-const readFile$1 = async uri => {
-  return invoke$1('FileSystem.readFile', uri);
+const readFile$2 = async uri => {
+  return invoke$3('FileSystem.readFile', uri);
 };
-const readFileAsBlob = async uri => {
-  return invoke$1('FileSystem.readFileAsBlob', uri);
+
+const {
+  invoke: invoke$2,
+  set: set$3
+} = create$1(IconThemeWorker);
+
+const TextMeasurementWorker = {
+  __proto__: null,
+  invoke: invoke$2,
+  set: set$3
 };
 
 const {
+  invoke: invoke$1,
   invokeAndTransfer,
-  set: set$3
+  set: set$2
 } = create$1(RendererWorker);
+const showContextMenu2 = async (uid, menuId, x, y, args) => {
+  number(uid);
+  number(menuId);
+  number(x);
+  number(y);
+  await invoke$1('ContextMenu.show2', uid, menuId, x, y, args);
+};
 const sendMessagePortToErrorWorker = async (port, rpcId) => {
   const command = 'Errors.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
@@ -1189,6 +1219,9 @@ const sendMessagePortToFileSystemWorker = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
 };
+const readFile$1 = async uri => {
+  return invoke$1('FileSystem.readFile', uri);
+};
 const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
@@ -1209,10 +1242,6 @@ const sendMessagePortToDiffWorker = async (port, rpcId = 0) => {
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToDiffWorker', port, command, rpcId);
 };
 
-const {
-  set: set$2
-} = create$1(IconThemeWorker);
-
 const {
   invoke,
   set: set$1
@@ -1236,13 +1265,13 @@ const create = () => {
     },
     diff(uid, modules, numbers) {
       const {
-        newState,
-        oldState
+        oldState,
+        scheduledState
       } = states[uid];
       const diffResult = [];
       for (let i = 0; i < modules.length; i++) {
         const fn = modules[i];
-        if (!fn(oldState, newState)) {
+        if (!fn(oldState, scheduledState)) {
           diffResult.push(numbers[i]);
         }
       }
@@ -1260,17 +1289,16 @@ const create = () => {
       return ids;
     },
     getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseFloat(key);
-      });
+      return Object.keys(states).map(Number);
     },
     registerCommands(commandMap) {
       Object.assign(commandMapRef, commandMap);
     },
-    set(uid, oldState, newState) {
+    set(uid, oldState, newState, scheduledState) {
       states[uid] = {
         newState,
-        oldState
+        oldState,
+        scheduledState: scheduledState ?? newState
       };
     },
     wrapCommand(fn) {
@@ -1290,7 +1318,8 @@ const create = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
       };
       return wrapped;
@@ -1327,7 +1356,8 @@ const create = () => {
         };
         states[uid] = {
           newState: latestNew,
-          oldState: latestOld.oldState
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
         return {
           error
@@ -1346,6 +1376,7 @@ const defaultAllowedLinkSchemes = ['http', 'https', 'file'];
 const createDefaultState = () => ({
   allowedLinkSchemes: defaultAllowedLinkSchemes,
   assetDir: '',
+  charWidth: 9,
   contentLeft: '',
   contentRight: '',
   deltaY: 0,
@@ -1358,6 +1389,9 @@ const createDefaultState = () => ({
   errorRightStack: '',
   finalDeltaY: 0,
   focus: 0,
+  focusVersion: 0,
+  fontFamily: 'monospace',
+  fontSize: 12,
   gitRoot: '',
   gutterWidthVariable: 9,
   handleOffset: 0,
@@ -1378,7 +1412,12 @@ const createDefaultState = () => ({
   languageIdLeft: 'unknown',
   languageIdRight: 'unknown',
   layout: 'horizontal',
+  leftEditor: {
+    cursorColumnIndex: 0,
+    cursorRowIndex: 0
+  },
   leftWidth: 48,
+  letterSpacing: 0,
   lineNumbers: true,
   maxInputLines: 5,
   maxLineY: 0,
@@ -1390,11 +1429,19 @@ const createDefaultState = () => ({
   renderModeRight: 'text',
   resizeOffsetX: 0,
   resizeOffsetY: 0,
+  rightEditor: {
+    cursorColumnIndex: 0,
+    cursorRowIndex: 0
+  },
   rightWidth: 48,
   root: '/',
   scrollBarActive: false,
+  scrollBarBackgroundImage: 'none',
   scrollBarDragOffsetY: 0,
   scrollBarHeight: 0,
+  searchQuery: '',
+  searchVisible: false,
+  showWhitespace: false,
   splitButtonEnabled: false,
   tokenizedLinesLeft: [],
   tokenizedLinesRight: [],
@@ -1408,23 +1455,37 @@ const createDefaultState = () => ({
   visibleLinesLeft: [],
   visibleLinesRight: [],
   width: 100,
+  wordWrap: false,
   workspacePath: '',
   x: 0,
   y: 0
 });
 
+const registry = create();
+const {
+  get
+} = registry;
+const {
+  getCommandIds
+} = registry;
+const {
+  getKeys: getKeys$1
+} = registry;
+const {
+  registerCommands
+} = registry;
+const {
+  set
+} = registry;
 const {
-  get,
-  getCommandIds,
-  registerCommands,
-  set,
-  wrapCommand} = create();
+  wrapCommand
+} = registry;
 
-const clamp = (value, minimum, maximum) => {
+const clamp$1 = (value, minimum, maximum) => {
   return Math.min(Math.max(value, minimum), maximum);
 };
 
-const SASH_WIDTH = 4;
+const SASH_WIDTH = 6;
 const DEFAULT_MINIMUM_PANE_WIDTH = 50;
 const getAvailableSize = size => {
   return Math.max(size - SASH_WIDTH, 0);
@@ -1448,7 +1509,7 @@ const getClampedLeftWidth = (width, leftWidth) => {
   const availableWidth = getAvailableSize(width);
   const minimumPaneWidth = getMinimumPaneWidth(width);
   const maximumLeftWidth = availableWidth - minimumPaneWidth;
-  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
+  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRightWidth = (width, leftWidth) => {
   return getAvailableSize(width) - leftWidth;
@@ -1466,7 +1527,7 @@ const getClampedPaneSize = (size, leftWidth) => {
   const availableSize = getAvailableSize(size);
   const minimumPaneWidth = Math.min(DEFAULT_MINIMUM_PANE_WIDTH, Math.floor(availableSize / 2));
   const maximumLeftWidth = availableSize - minimumPaneWidth;
-  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
+  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRemainingPaneSize = (size, leftWidth) => {
   return getAvailableSize(size) - leftWidth;
@@ -1495,53 +1556,139 @@ const create2 = (id, uri, x, y, width, height, workspacePath, platform, assetDir
   set(id, state, state);
 };
 
-const isEqual$3 = (oldState, newState) => {
-  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.finalDeltaY === newState.finalDeltaY && oldState.gutterWidthVariable === newState.gutterWidthVariable && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.layout === newState.layout && oldState.leftWidth === newState.leftWidth && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.rightWidth === newState.rightWidth && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.totalLineCount === newState.totalLineCount;
+const lineNumberCharWidth = 9;
+const getGutterWidthVariable = maxLineNumber => {
+  const maxLineNumberCharCount = String(Math.max(maxLineNumber, 1)).length;
+  return maxLineNumberCharCount * lineNumberCharWidth;
 };
 
-const isEqual$2 = (oldState, newState) => {
-  return oldState.focus === newState.focus;
+const getInlineDiffChanges = (linesLeft, linesRight) => {
+  return invoke$7('Diff.diffInline', linesLeft, linesRight);
 };
 
-const isEqual$1 = (oldState, newState) => {
-  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.lineNumbers === newState.lineNumbers && oldState.layout === newState.layout && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY;
-};
+const None = 0;
+const Insertion = 1;
+const Deletion = 2;
 
-const RenderItems = 4;
-const RenderFocusContext = 7;
-const RenderValue = 8;
-const RenderCss = 10;
-const RenderIncremental = 11;
+const getVisibleInlineDiffRows = inlineChanges => {
+  const visibleRows = [];
+  for (let index = 0; index < inlineChanges.length; index++) {
+    const inlineChange = inlineChanges[index];
+    const nextInlineChange = inlineChanges[index + 1];
+    if (inlineChange.type === Deletion && nextInlineChange?.type === Insertion) {
+      visibleRows.push({
+        leftChange: inlineChange,
+        rightChange: nextInlineChange
+      });
+      index++;
+      continue;
+    }
+    if (inlineChange.type === Deletion) {
+      visibleRows.push({
+        leftChange: inlineChange
+      });
+      continue;
+    }
+    if (inlineChange.type === Insertion) {
+      visibleRows.push({
+        rightChange: inlineChange
+      });
+      continue;
+    }
+    visibleRows.push({
+      leftChange: inlineChange,
+      rightChange: inlineChange
+    });
+  }
+  return visibleRows;
+};
 
-const isEqual = (oldState, newState) => {
-  return newState.inputSource === User || oldState.inputValue === newState.inputValue;
+const getInlineDiffState = async (contentLeft, contentRight) => {
+  const linesLeft = contentLeft ? contentLeft.split('\n') : [''];
+  const linesRight = contentRight ? contentRight.split('\n') : [''];
+  const inlineChanges = await getInlineDiffChanges(linesLeft, linesRight);
+  return {
+    inlineChanges,
+    totalLineCount: Math.max(getVisibleInlineDiffRows(inlineChanges).length, 1)
+  };
 };
 
-const modules = [isEqual$1, isEqual, isEqual$3, isEqual$2];
-const numbers = [RenderIncremental, RenderValue, RenderCss, RenderFocusContext];
+const getLineCount = content => {
+  if (!content) {
+    return 1;
+  }
+  return content.split('\n').length;
+};
 
-const diff = (oldState, newState) => {
-  const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
-    if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
+const AddedColor = 'rgba(46, 160, 67, 0.72)';
+const DeletedColor = 'rgba(248, 81, 73, 0.72)';
+const formatPercentage = value => {
+  return String(Number(value.toFixed(4)));
+};
+const getScrollBarMarkerType = changeType => {
+  if (changeType === Insertion) {
+    return 'added';
+  }
+  if (changeType === Deletion) {
+    return 'deleted';
+  }
+  return '';
+};
+const getScrollBarMarkerColor = type => {
+  if (type === 'added') {
+    return AddedColor;
+  }
+  return DeletedColor;
+};
+const getScrollBarMarkersForSide = (rows, side, totalLineCount) => {
+  const markers = [];
+  let start = 0;
+  let activeType = '';
+  for (let index = 0; index < rows.length; index++) {
+    const row = rows[index];
+    const change = side === 'left' ? row.leftChange : row.rightChange;
+    const nextType = getScrollBarMarkerType(change?.type);
+    if (nextType === activeType) {
+      continue;
+    }
+    if (activeType) {
+      markers.push({
+        color: getScrollBarMarkerColor(activeType),
+        end: index / totalLineCount * 100,
+        start: start / totalLineCount * 100
+      });
     }
+    activeType = nextType;
+    start = index;
   }
-  return diffResult;
+  if (activeType) {
+    markers.push({
+      color: getScrollBarMarkerColor(activeType),
+      end: rows.length / totalLineCount * 100,
+      start: start / totalLineCount * 100
+    });
+  }
+  return markers;
 };
-
-const diff2 = uid => {
-  const {
-    newState,
-    oldState
-  } = get(uid);
-  const result = diff(oldState, newState);
-  return result;
+const getScrollBarMarkerBackgroundImage = ({
+  color,
+  end,
+  start
+}) => {
+  const formattedStart = formatPercentage(start);
+  const formattedEnd = formatPercentage(end);
+  return `linear-gradient(to bottom, transparent ${formattedStart}%, ${color} ${formattedStart}%, ${color} ${formattedEnd}%, transparent ${formattedEnd}%)`;
 };
-
-const handleContextMenu = (state, button, clientX, clientY) => {
-  return state;
+const getScrollBarBackgroundImage = (inlineChanges, totalLineCount) => {
+  if (inlineChanges.length === 0 || totalLineCount === 0) {
+    return 'none';
+  }
+  const rows = getVisibleInlineDiffRows(inlineChanges);
+  const markers = [...getScrollBarMarkersForSide(rows, 'left', totalLineCount), ...getScrollBarMarkersForSide(rows, 'right', totalLineCount)];
+  if (markers.length === 0) {
+    return 'none';
+  }
+  return markers.map(getScrollBarMarkerBackgroundImage).join(', ');
 };
 
 const getNumberOfVisibleItems = (height, itemHeight) => {
@@ -1566,7 +1713,7 @@ const getScrollState = (height, itemHeight, totalLineCount, minimumSliderSize, d
   const safeTotalLineCount = Math.max(totalLineCount, 1);
   const contentHeight = safeTotalLineCount * safeItemHeight;
   const finalDeltaY = Math.max(contentHeight - height, 0);
-  const clampedDeltaY = clamp(deltaY, 0, finalDeltaY);
+  const clampedDeltaY = clamp$1(deltaY, 0, finalDeltaY);
   const minLineY = Math.floor(clampedDeltaY / safeItemHeight);
   const numberOfVisibleItems = getNumberOfVisibleItems(height, safeItemHeight);
   const maxLineY = Math.min(minLineY + numberOfVisibleItems, safeTotalLineCount);
@@ -1581,42 +1728,54 @@ const getScrollState = (height, itemHeight, totalLineCount, minimumSliderSize, d
   };
 };
 
-const None = 0;
-const Insertion = 1;
-const Deletion = 2;
-
-const getVisibleInlineDiffRows = inlineChanges => {
-  const visibleRows = [];
-  for (let index = 0; index < inlineChanges.length; index++) {
-    const inlineChange = inlineChanges[index];
-    const nextInlineChange = inlineChanges[index + 1];
-    if (inlineChange.type === Deletion && nextInlineChange?.type === Insertion) {
-      visibleRows.push({
-        leftChange: inlineChange,
-        rightChange: nextInlineChange
-      });
-      index++;
-      continue;
-    }
-    if (inlineChange.type === Deletion) {
-      visibleRows.push({
-        leftChange: inlineChange
-      });
-      continue;
-    }
-    if (inlineChange.type === Insertion) {
-      visibleRows.push({
-        rightChange: inlineChange
-      });
-      continue;
-    }
-    visibleRows.push({
-      leftChange: inlineChange,
-      rightChange: inlineChange
-    });
-  }
-  return visibleRows;
-};
+const DiffEditor = 'DiffEditor';
+const DiffEditorBody = 'DiffEditorBody';
+const DiffEditorButtons = 'DiffEditorButtons';
+const DiffEditorContent = 'DiffEditorContent';
+const DiffEditorContentLeft = 'DiffEditorContentLeft';
+const DiffEditorContentRight = 'DiffEditorContentRight';
+const DiffEditorError = 'DiffEditorError';
+const DiffEditorErrorCodeFrame = 'DiffEditorErrorCodeFrame';
+const DiffEditorErrorMessage = 'DiffEditorErrorMessage';
+const DiffEditorErrorStack = 'DiffEditorErrorStack';
+const DiffEditorErrorStackLink = 'DiffEditorErrorStackLink';
+const DiffEditorGutter = 'DiffEditorGutter';
+const DiffEditorHorizontal = 'DiffEditorHorizontal';
+const DiffEditorInput$1 = 'DiffEditorInput';
+const DiffEditorInputWrapper = 'DiffEditorInputWrapper';
+const DiffEditorLineMissing = 'DiffEditorLineMissing';
+const DiffEditorLineNumber = 'DiffEditorLineNumber';
+const DiffEditorLineNumberDeletion = 'DiffEditorLineNumberDeletion';
+const DiffEditorLineNumberEmpty = 'DiffEditorLineNumberEmpty';
+const DiffEditorLineNumberInsertion = 'DiffEditorLineNumberInsertion';
+const DiffEditorLineNumberMeta = 'DiffEditorLineNumberMeta';
+const DiffEditorModeToggle = 'DiffEditorModeToggle';
+const DiffEditorRows = 'DiffEditorRows';
+const DiffEditorSelections = 'DiffEditorSelections';
+const DiffEditorVertical = 'DiffEditorVertical';
+const DiffEditorWithSearch = 'DiffEditorWithSearch';
+const DiffEditorWhitespaceToggle = 'DiffEditorWhitespaceToggle';
+const DiffEditorWhitespaceToggleActive = 'DiffEditorWhitespaceToggleActive';
+const DiffSearchHeader = 'DiffSearchHeader';
+const DiffSearchInput = 'DiffSearchInput';
+const DiffScrollBar = 'DiffScrollBar';
+const DiffScrollBarThumb = 'DiffScrollBarThumb';
+const DiffTokenChanged = 'DiffToken--changed';
+const EditorCursor = 'EditorCursor';
+const EditorCursorRight = 'EditorCursorRight';
+const EditorRow = 'EditorRow';
+const EditorRowDeletion = 'EditorRow Deletion';
+const EditorRowGitButtons = 'EditorRow GitButtons';
+const EditorRowIncomingChange = 'EditorRow IncomingChange';
+const EditorRowInsertion = 'EditorRow Insertion';
+const ImageContent = 'ImageContent';
+const ImageElement = 'ImageElement';
+const InlineDiffEditor = 'InlineDiffEditor';
+const InlineDiffEditorContent = 'InlineDiffEditorContent';
+const Sash = 'Sash';
+const SashHorizontal = 'SashHorizontal';
+const SashVertical = 'SashVertical';
+const Viewlet = 'Viewlet';
 
 const getVisibleRows = (content, totalLineCount, minLineY, maxLineY) => {
   const lines = content ? content.split('\n') : [''];
@@ -1676,23 +1835,253 @@ const getVisibleLineType = (inlineChange, side) => {
   }
 };
 
-const getVisibleLines = (content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines = []) => {
-  if (inlineChanges.length === 0) {
-    return getVisibleRows(content, totalLineCount, minLineY, maxLineY).map((line, index) => ({
-      lineNumber: minLineY + index + 1,
-      tokens: getTokens(tokenizedLines, minLineY + index, line),
-      type: VisibleLineType.Normal
-    }));
+const maxInlineDiffMatrixSize = 10_000;
+const getInlineChangeLineIndex = (inlineChange, side) => {
+  if (!inlineChange) {
+    return -1;
   }
-  const lines = content ? content.split('\n') : [''];
-  return getVisibleInlineDiffRows(inlineChanges).slice(minLineY, maxLineY).map(visibleRow => {
+  if (side === 'left') {
+    return inlineChange.leftIndex;
+  }
+  return inlineChange.rightIndex;
+};
+const getCommonPrefixLength = (chars, otherChars) => {
+  const max = Math.min(chars.length, otherChars.length);
+  let index = 0;
+  while (index < max && chars[index] === otherChars[index]) {
+    index++;
+  }
+  return index;
+};
+const getCommonSuffixLength = (chars, otherChars, prefixLength) => {
+  const max = Math.min(chars.length, otherChars.length) - prefixLength;
+  let index = 0;
+  while (index < max && chars[chars.length - index - 1] === otherChars[otherChars.length - index - 1]) {
+    index++;
+  }
+  return index;
+};
+const getCharacterOffset = (chars, endIndex) => {
+  let offset = 0;
+  for (let index = 0; index < endIndex; index++) {
+    offset += chars[index].length;
+  }
+  return offset;
+};
+const getChangedRangesFallback = (chars, prefixLength, suffixLength) => {
+  const start = getCharacterOffset(chars, prefixLength);
+  const end = getCharacterOffset(chars, chars.length - suffixLength);
+  if (start === end) {
+    return [];
+  }
+  return [{
+    end,
+    start
+  }];
+};
+const getSubsequenceLengths = (diffChars, diffOtherChars) => {
+  const rowCount = diffChars.length + 1;
+  const columnCount = diffOtherChars.length + 1;
+  const lengths = Array.from({
+    length: rowCount
+  }, () => Array(columnCount).fill(0));
+  for (let row = diffChars.length - 1; row >= 0; row--) {
+    for (let column = diffOtherChars.length - 1; column >= 0; column--) {
+      lengths[row][column] = diffChars[row] === diffOtherChars[column] ? lengths[row + 1][column + 1] + 1 : Math.max(lengths[row + 1][column], lengths[row][column + 1]);
+    }
+  }
+  return lengths;
+};
+const finishRange = (ranges, rangeStart, offset) => {
+  if (rangeStart !== -1 && rangeStart !== offset) {
+    return {
+      ranges: [...ranges, {
+        end: offset,
+        start: rangeStart
+      }],
+      rangeStart: -1
+    };
+  }
+  return {
+    ranges,
+    rangeStart: -1
+  };
+};
+const advanceDeletedCharacter = (rangeStart, offset, char) => {
+  return {
+    offset: offset + char.length,
+    rangeStart: rangeStart === -1 ? offset : rangeStart
+  };
+};
+const getMatrixChangedRanges = (chars, diffChars, diffOtherChars, lengths, prefixLength) => {
+  let ranges = [];
+  let row = 0;
+  let column = 0;
+  let offset = getCharacterOffset(chars, prefixLength);
+  let rangeStart = -1;
+  while (row < diffChars.length && column < diffOtherChars.length) {
+    if (diffChars[row] === diffOtherChars[column]) {
+      const finishedRangeState = finishRange(ranges, rangeStart, offset);
+      ({
+        ranges,
+        rangeStart
+      } = finishedRangeState);
+      offset += diffChars[row].length;
+      row++;
+      column++;
+      continue;
+    }
+    if (lengths[row + 1][column] >= lengths[row][column + 1]) {
+      const state = advanceDeletedCharacter(rangeStart, offset, diffChars[row]);
+      ({
+        offset,
+        rangeStart
+      } = state);
+      row++;
+      continue;
+    }
+    column++;
+  }
+  while (row < diffChars.length) {
+    const state = advanceDeletedCharacter(rangeStart, offset, diffChars[row]);
+    ({
+      offset,
+      rangeStart
+    } = state);
+    row++;
+  }
+  return finishRange(ranges, rangeStart, offset).ranges;
+};
+const getChangedRanges = (text, otherText) => {
+  if (text === otherText) {
+    return [];
+  }
+  const chars = [...text];
+  const otherChars = [...otherText];
+  const prefixLength = getCommonPrefixLength(chars, otherChars);
+  const suffixLength = getCommonSuffixLength(chars, otherChars, prefixLength);
+  const diffLength = chars.length - prefixLength - suffixLength;
+  if (diffLength <= 0) {
+    return [];
+  }
+  const otherDiffLength = otherChars.length - prefixLength - suffixLength;
+  if (diffLength * otherDiffLength > maxInlineDiffMatrixSize) {
+    return getChangedRangesFallback(chars, prefixLength, suffixLength);
+  }
+  const diffChars = chars.slice(prefixLength, chars.length - suffixLength);
+  const diffOtherChars = otherChars.slice(prefixLength, otherChars.length - suffixLength);
+  const lengths = getSubsequenceLengths(diffChars, diffOtherChars);
+  return getMatrixChangedRanges(chars, diffChars, diffOtherChars, lengths, prefixLength);
+};
+const mergeChangedClassName = className => {
+  if (!className) {
+    return DiffTokenChanged;
+  }
+  return `${className} ${DiffTokenChanged}`;
+};
+const getTokenSlice = (token, tokenStart, sliceStart, sliceEnd, type) => {
+  return {
+    text: token.text.slice(sliceStart - tokenStart, sliceEnd - tokenStart),
+    type
+  };
+};
+const skipFinishedRanges = (ranges, rangeIndex, tokenStart) => {
+  let nextRangeIndex = rangeIndex;
+  while (nextRangeIndex < ranges.length && ranges[nextRangeIndex].end <= tokenStart) {
+    nextRangeIndex++;
+  }
+  return nextRangeIndex;
+};
+const applyRangeToToken = (token, tokenStart, tokenEnd, range, cursor) => {
+  const changedStart = Math.max(range.start, tokenStart);
+  const changedEnd = Math.min(range.end, tokenEnd);
+  const tokens = [];
+  if (cursor < changedStart) {
+    tokens.push(getTokenSlice(token, tokenStart, cursor, changedStart, token.type));
+  }
+  if (changedStart < changedEnd) {
+    tokens.push(getTokenSlice(token, tokenStart, changedStart, changedEnd, mergeChangedClassName(token.type)));
+  }
+  return {
+    cursor: changedEnd,
+    tokens
+  };
+};
+const applyRangesToToken = (token, tokenStart, tokenEnd, rangeIndex, ranges) => {
+  let cursor = tokenStart;
+  let nextRangeIndex = rangeIndex;
+  let tokens = [];
+  while (nextRangeIndex < ranges.length && ranges[nextRangeIndex].start < tokenEnd) {
+    const range = ranges[nextRangeIndex];
+    const tokenSegmentState = applyRangeToToken(token, tokenStart, tokenEnd, range, cursor);
+    ({
+      cursor
+    } = tokenSegmentState);
+    tokens = [...tokens, ...tokenSegmentState.tokens];
+    if (range.end > tokenEnd) {
+      return {
+        cursor,
+        nextRangeIndex,
+        tokens
+      };
+    }
+    nextRangeIndex++;
+  }
+  return {
+    cursor,
+    nextRangeIndex,
+    tokens
+  };
+};
+const applyChangedRanges = (tokens, ranges) => {
+  if (ranges.length === 0) {
+    return tokens;
+  }
+  const changedTokens = [];
+  let tokenStart = 0;
+  let rangeIndex = 0;
+  for (const token of tokens) {
+    const tokenEnd = tokenStart + token.text.length;
+    rangeIndex = skipFinishedRanges(ranges, rangeIndex, tokenStart);
+    const {
+      cursor,
+      nextRangeIndex,
+      tokens
+    } = applyRangesToToken(token, tokenStart, tokenEnd, rangeIndex, ranges);
+    changedTokens.push(...tokens);
+    if (cursor < tokenEnd) {
+      changedTokens.push(getTokenSlice(token, tokenStart, cursor, tokenEnd, token.type));
+    }
+    tokenStart = tokenEnd;
+    rangeIndex = nextRangeIndex;
+  }
+  return changedTokens.filter(token => token.text.length > 0);
+};
+const isPairedChange = visibleRow => {
+  return visibleRow.leftChange?.type === Deletion && visibleRow.rightChange?.type === Insertion;
+};
+const getVisibleLines = (content, otherContent, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines = []) => {
+  if (inlineChanges.length === 0) {
+    return getVisibleRows(content, totalLineCount, minLineY, maxLineY).map((line, index) => ({
+      lineNumber: minLineY + index + 1,
+      tokens: getTokens(tokenizedLines, minLineY + index, line),
+      type: VisibleLineType.Normal
+    }));
+  }
+  const lines = content ? content.split('\n') : [''];
+  const otherLines = otherContent ? otherContent.split('\n') : [''];
+  return getVisibleInlineDiffRows(inlineChanges).slice(minLineY, maxLineY).map(visibleRow => {
     const inlineChange = side === 'left' ? visibleRow.leftChange : visibleRow.rightChange;
     const type = inlineChange ? getVisibleLineType(inlineChange, side) : VisibleLineType.Normal;
-    const lineIndex = inlineChange ? side === 'left' ? inlineChange.leftIndex : inlineChange.rightIndex : -1;
-    const tokens = inlineChange && lineIndex >= 0 ? getTokens(tokenizedLines, lineIndex, getLine(lines, lineIndex)) : [];
+    const lineIndex = getInlineChangeLineIndex(inlineChange, side);
+    const line = getLine(lines, lineIndex);
+    const tokens = inlineChange && lineIndex >= 0 ? getTokens(tokenizedLines, lineIndex, line) : [];
+    const otherLineIndex = side === 'left' ? visibleRow.rightChange?.rightIndex : visibleRow.leftChange?.leftIndex;
+    const otherLine = typeof otherLineIndex === 'number' ? getLine(otherLines, otherLineIndex) : '';
+    const visibleTokens = otherContent && isPairedChange(visibleRow) ? applyChangedRanges(tokens, getChangedRanges(line, otherLine)) : tokens;
     return {
       lineNumber: lineIndex >= 0 ? lineIndex + 1 : -1,
-      tokens,
+      tokens: visibleTokens,
       type
     };
   });
@@ -1710,32 +2099,229 @@ const getVisibleLinesState = ({
   totalLineCountRight
 }) => {
   return {
-    visibleLinesLeft: getVisibleLines(contentLeft, totalLineCountLeft, inlineChanges, minLineY, maxLineY, 'left', tokenizedLinesLeft),
-    visibleLinesRight: getVisibleLines(contentRight, totalLineCountRight, inlineChanges, minLineY, maxLineY, 'right', tokenizedLinesRight)
+    visibleLinesLeft: getVisibleLines(contentLeft, contentRight, totalLineCountLeft, inlineChanges, minLineY, maxLineY, 'left', tokenizedLinesLeft),
+    visibleLinesRight: getVisibleLines(contentRight, contentLeft, totalLineCountRight, inlineChanges, minLineY, maxLineY, 'right', tokenizedLinesRight)
   };
 };
 
-const getNextPaneSizes$1 = (state, width, height) => {
-  const totalPaneSize = state.leftWidth + state.rightWidth;
-  const ratio = totalPaneSize === 0 ? 0.5 : state.leftWidth / totalPaneSize;
-  const size = state.layout === 'vertical' ? height : width;
-  return getPaneSizes(size, ratio);
+const User = 1;
+
+const languageCache = {
+  assetDir: '',
+  languages: [],
+  platform: -1
 };
-const handleResize = (state, width, height) => {
-  if (state.width === width && state.height === height) {
+const getLanguages = async (platform, assetDir) => {
+  if (languageCache.platform === platform && languageCache.assetDir === assetDir) {
+    return languageCache.languages;
+  }
+  try {
+    const languages = await invoke$4('Extensions.getLanguages', platform, assetDir);
+    if (!Array.isArray(languages)) {
+      return [];
+    }
+    languageCache.platform = platform;
+    languageCache.assetDir = assetDir;
+    languageCache.languages = languages;
+    return languageCache.languages;
+  } catch {
+    return [];
+  }
+};
+
+const getPath = (protocol, uri) => {
+  if (!uri) {
+    return '';
+  }
+  if (protocol === 'file' && !uri.startsWith('file://')) {
+    return uri;
+  }
+  return uri.slice(protocol.length + 3);
+};
+
+const protocolRegex = /^([a-z-]+):\/\//;
+const getProtocol = uri => {
+  if (!uri) {
+    return 'file';
+  }
+  const match = uri.match(protocolRegex);
+  if (match) {
+    return match[1];
+  }
+  return 'file';
+};
+
+const queryOrHashRegex = /[?#]/;
+const getFileName = uri => {
+  const protocol = getProtocol(uri);
+  const path = getPath(protocol, uri).split(queryOrHashRegex, 1)[0];
+  const lastSlashIndex = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'));
+  if (lastSlashIndex === -1) {
+    return path;
+  }
+  return path.slice(lastSlashIndex + 1);
+};
+const getExtensionIndexes = fileName => {
+  const lastIndex = fileName.lastIndexOf('.');
+  if (lastIndex === -1) {
+    return [-1, -1];
+  }
+  return [lastIndex, fileName.lastIndexOf('.', lastIndex - 1)];
+};
+const hasMatchingExtension = (language, extension) => {
+  if (!extension || !language.extensions) {
+    return false;
+  }
+  const extensionLower = extension.toLowerCase();
+  return language.extensions.some(value => value.toLowerCase() === extensionLower);
+};
+const hasMatchingFileName = (language, fileName) => {
+  if (!fileName || !language.fileNames) {
+    return false;
+  }
+  const fileNameLower = fileName.toLowerCase();
+  return language.fileNames.some(value => value.toLowerCase() === fileNameLower);
+};
+const getSyntaxLanguage = (uri, languages) => {
+  const fileName = getFileName(uri);
+  if (!fileName) {
+    return {
+      languageId: 'unknown',
+      tokenizerPath: ''
+    };
+  }
+  const [lastExtensionIndex, secondExtensionIndex] = getExtensionIndexes(fileName);
+  const extension = lastExtensionIndex === -1 ? '' : fileName.slice(lastExtensionIndex);
+  const secondExtension = secondExtensionIndex === -1 ? '' : fileName.slice(secondExtensionIndex);
+  for (const language of languages) {
+    if (hasMatchingExtension(language, extension) || hasMatchingExtension(language, secondExtension) || hasMatchingFileName(language, fileName)) {
+      return {
+        languageId: language.id,
+        tokenizerPath: language.tokenize || ''
+      };
+    }
+  }
+  return {
+    languageId: 'unknown',
+    tokenizerPath: ''
+  };
+};
+
+const getUniqueLanguages = (languageLeft, languageRight) => {
+  return new Map([languageLeft, languageRight].map(language => [`${language.languageId}:${language.tokenizerPath}`, language])).values().toArray();
+};
+
+const canTokenize = language => {
+  return language.languageId !== 'unknown' && !!language.tokenizerPath;
+};
+
+const loadTokenizer = async language => {
+  if (!canTokenize(language)) {
+    return;
+  }
+  await loadTokenizer$1(language.languageId, language.tokenizerPath);
+};
+
+const tokenizeCodeBlock = async (content, language) => {
+  if (!canTokenize(language)) {
+    return [];
+  }
+  try {
+    const result = await invoke('Tokenizer.tokenizeCodeBlock', content, language.languageId, language.tokenizerPath);
+    if (!Array.isArray(result)) {
+      return [];
+    }
+    return result;
+  } catch {
+    return [];
+  }
+};
+
+const emptySyntaxHighlightingState = {
+  languageIdLeft: 'unknown',
+  languageIdRight: 'unknown',
+  tokenizedLinesLeft: [],
+  tokenizedLinesRight: []
+};
+const loadSyntaxHighlighting = async (contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) => {
+  try {
+    const languages = await getLanguages(platform, assetDir);
+    const languageLeft = getSyntaxLanguage(uriLeft, languages);
+    const languageRight = getSyntaxLanguage(uriRight, languages);
+    const uniqueLanguages = getUniqueLanguages(languageLeft, languageRight);
+    await Promise.all(uniqueLanguages.map(loadTokenizer));
+    const [tokenizedLinesLeft, tokenizedLinesRight] = await Promise.all([tokenizeCodeBlock(contentLeft, languageLeft), tokenizeCodeBlock(contentRight, languageRight)]);
+    return {
+      languageIdLeft: languageLeft.languageId,
+      languageIdRight: languageRight.languageId,
+      tokenizedLinesLeft,
+      tokenizedLinesRight
+    };
+  } catch {
+    return emptySyntaxHighlightingState;
+  }
+};
+
+const getBaseContentRight$2 = state => {
+  if (state.inputValue && state.contentRight.startsWith(state.inputValue)) {
+    return state.contentRight.slice(state.inputValue.length);
+  }
+  return state.contentRight;
+};
+const applyEditInput = async (state, inputValue) => {
+  if (inputValue === state.inputValue || state.renderModeRight !== 'text' || state.errorRightMessage || getLineCount(inputValue) > state.maxInputLines) {
     return state;
   }
   const {
-    leftWidth,
-    rightWidth
-  } = getNextPaneSizes$1(state, width, height);
-  const scrollState = getScrollState(height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, state.deltaY);
+    totalLineCountLeft
+  } = state;
+  // compute base content without any previously-applied input buffer
+  const baseContent = getBaseContentRight$2(state);
+
+  // derive insertion index from cursor position (row/column)
+  // compute full content index (including any previously-applied inputValue prefix)
+  const fullLines = state.contentRight ? state.contentRight.split('\n') : [''];
+  const fullCursorRow = Math.max(0, Math.min(state.rightEditor.cursorRowIndex, fullLines.length - 1));
+  const fullCurrentLine = fullLines[fullCursorRow] ?? '';
+  const fullCursorCol = Math.max(0, Math.min(state.rightEditor.cursorColumnIndex, fullCurrentLine.length));
+  let fullIndex = 0;
+  for (let i = 0; i < fullCursorRow; i++) {
+    fullIndex += (fullLines[i] ?? '').length + 1;
+  }
+  fullIndex += fullCursorCol;
+  const prefixLength = state.inputValue && state.contentRight.startsWith(state.inputValue) ? state.inputValue.length : 0;
+  const index = Math.max(0, fullIndex - prefixLength);
+  // base content split into lines is available if needed
+
+  const before = baseContent.slice(0, index);
+  const after = baseContent.slice(index);
+  const contentRight = `${before}${inputValue}${after}`;
+  const totalLineCountRight = getLineCount(contentRight);
+  const canComputeInlineDiff = state.renderModeLeft === 'text' && !state.errorLeftMessage;
+  const {
+    inlineChanges,
+    totalLineCount
+  } = canComputeInlineDiff ? await getInlineDiffState(state.contentLeft, contentRight) : {
+    inlineChanges: [],
+    totalLineCount: Math.max(totalLineCountLeft, totalLineCountRight)
+  };
+  const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
+  const syntaxHighlightingState = state.renderModeRight === 'text' && !state.errorRightMessage ? await loadSyntaxHighlighting(state.contentLeft, contentRight, state.uriLeft, state.uriRight, state.platform, state.assetDir) : undefined;
   const nextState = {
     ...state,
-    height,
-    leftWidth,
-    rightWidth,
-    width,
+    contentRight,
+    gutterWidthVariable: getGutterWidthVariable(Math.max(totalLineCountLeft, totalLineCountRight)),
+    inlineChanges,
+    inputSource: User,
+    inputValue,
+    languageIdLeft: syntaxHighlightingState?.languageIdLeft || state.languageIdLeft,
+    languageIdRight: syntaxHighlightingState?.languageIdRight || state.languageIdRight,
+    scrollBarBackgroundImage: getScrollBarBackgroundImage(inlineChanges, totalLineCount),
+    tokenizedLinesLeft: syntaxHighlightingState?.tokenizedLinesLeft || state.tokenizedLinesLeft,
+    tokenizedLinesRight: syntaxHighlightingState?.tokenizedLinesRight || [],
+    totalLineCount,
+    totalLineCountLeft,
+    totalLineCountRight,
     ...scrollState
   };
   return {
@@ -1754,308 +2340,1182 @@ const handleResize = (state, width, height) => {
   };
 };
 
-const handleSashPointerDown = (state, clientX, clientY) => {
-  const isVertical = state.layout === 'vertical';
-  return {
-    ...state,
-    isResizing: true,
-    resizeOffsetX: isVertical ? 0 : clientX - state.x - state.leftWidth,
-    resizeOffsetY: isVertical ? clientY - state.y - state.leftWidth : 0
-  };
+const getBaseContentRight$1 = state => {
+  if (state.inputValue && state.contentRight.startsWith(state.inputValue)) {
+    return state.contentRight.slice(state.inputValue.length);
+  }
+  return state.contentRight;
 };
+const deleteLeft = async state => {
+  if (state.inputValue) {
+    return applyEditInput(state, state.inputValue.slice(0, -1));
+  }
+  const baseContent = getBaseContentRight$1(state);
+  const cursorRow = Math.max(0, Math.min(state.rightEditor.cursorRowIndex, getLineCount(baseContent) - 1));
+  const lines = baseContent.split('\n');
+  const currentLine = lines[cursorRow] ?? '';
+  const cursorCol = Math.max(0, Math.min(state.rightEditor.cursorColumnIndex, currentLine.length));
 
-const getSashPointerMoveWidths = (state, clientX, clientY) => {
-  if (state.layout === 'vertical') {
-    const rawTopHeight = clientY - state.y - state.resizeOffsetY;
-    const leftWidth = getClampedPaneSize(state.height, rawTopHeight);
-    const rightWidth = getRemainingPaneSize(state.height, leftWidth);
-    return {
-      leftWidth,
-      rightWidth
-    };
+  // compute absolute index
+  let index = 0;
+  for (let i = 0; i < cursorRow; i++) {
+    index += (lines[i] ?? '').length + 1;
   }
-  const rawLeftWidth = clientX - state.x - state.resizeOffsetX;
-  const leftWidth = getClampedLeftWidth(state.width, rawLeftWidth);
-  const rightWidth = getRightWidth(state.width, leftWidth);
-  return {
-    leftWidth,
-    rightWidth
-  };
-};
-const handleSashPointerMove = (state, clientX, clientY) => {
-  if (!state.isResizing) {
+  index += cursorCol;
+  if (index <= 0) {
     return state;
   }
+  const contentRight = baseContent.slice(0, index - 1) + baseContent.slice(index);
   const {
-    leftWidth,
-    rightWidth
-  } = getSashPointerMoveWidths(state, clientX, clientY);
-  return {
-    ...state,
-    leftWidth,
-    rightWidth
-  };
-};
-
-const handleSashPointerUp = (state, clientX, clientY) => {
-  if (!state.isResizing) {
-    return state;
-  }
+    totalLineCountLeft
+  } = state;
+  const totalLineCountRight = getLineCount(contentRight);
+  const canComputeInlineDiff = state.renderModeLeft === 'text' && !state.errorLeftMessage;
   const {
-    leftWidth,
-    rightWidth
-  } = getSashPointerMoveWidths(state, clientX, clientY);
-  return {
-    ...state,
-    isResizing: false,
-    leftWidth,
-    resizeOffsetX: 0,
-    resizeOffsetY: 0,
-    rightWidth
+    inlineChanges,
+    totalLineCount
+  } = canComputeInlineDiff ? await getInlineDiffState(state.contentLeft, contentRight) : {
+    inlineChanges: [],
+    totalLineCount: Math.max(totalLineCountLeft, totalLineCountRight)
   };
-};
-
-const getScrollBarThumbTop = (height, scrollBarHeight, deltaY, finalDeltaY) => {
-  const scrollRange = Math.max(height - scrollBarHeight, 0);
-  if (scrollRange === 0 || finalDeltaY <= 0) {
-    return 0;
-  }
-  return deltaY / finalDeltaY * scrollRange;
-};
-
-const normalizeFloatingPointError = value => {
-  return Number(value.toPrecision(16));
-};
-const handleScrollBarPointerDown = (state, clientY) => {
-  if (!state.scrollBarActive) {
-    return state;
-  }
-  const thumbTop = getScrollBarThumbTop(state.height, state.scrollBarHeight, state.deltaY, state.finalDeltaY);
-  return {
+  const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
+  const nextState = {
     ...state,
-    isScrollBarDragging: true,
-    scrollBarDragOffsetY: normalizeFloatingPointError(clientY - state.y - thumbTop)
+    contentRight,
+    gutterWidthVariable: getGutterWidthVariable(Math.max(totalLineCountLeft, totalLineCountRight)),
+    inlineChanges,
+    inputSource: User,
+    inputValue: '',
+    scrollBarBackgroundImage: getScrollBarBackgroundImage(inlineChanges, totalLineCount),
+    tokenizedLinesRight: [],
+    totalLineCount,
+    totalLineCountLeft,
+    totalLineCountRight,
+    ...scrollState
   };
-};
-
-const getDeltaYFromScrollBarThumbTop = (height, scrollBarHeight, thumbTop, finalDeltaY) => {
-  const scrollRange = Math.max(height - scrollBarHeight, 0);
-  if (scrollRange === 0 || finalDeltaY <= 0) {
-    return 0;
-  }
-  const clampedThumbTop = Math.min(Math.max(thumbTop, 0), scrollRange);
-  return clampedThumbTop / scrollRange * finalDeltaY;
-};
-
-const handleScrollBarPointerMove = (state, clientY) => {
-  if (!state.isScrollBarDragging) {
-    return state;
-  }
-  const thumbTop = clientY - state.y - state.scrollBarDragOffsetY;
-  const deltaY = getDeltaYFromScrollBarThumbTop(state.height, state.scrollBarHeight, thumbTop, state.finalDeltaY);
-  const scrollState = getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, deltaY);
   return {
-    ...state,
-    ...scrollState,
+    ...nextState,
     ...getVisibleLinesState({
-      contentLeft: state.contentLeft,
-      contentRight: state.contentRight,
-      inlineChanges: state.inlineChanges,
-      maxLineY: scrollState.maxLineY,
-      minLineY: scrollState.minLineY,
-      tokenizedLinesLeft: state.tokenizedLinesLeft,
-      tokenizedLinesRight: state.tokenizedLinesRight,
-      totalLineCountLeft: state.totalLineCountLeft,
-      totalLineCountRight: state.totalLineCountRight
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
     })
   };
 };
 
-const handleScrollBarPointerUp = (state, clientY) => {
-  const nextState = handleScrollBarPointerMove(state, clientY);
-  return {
-    ...nextState,
-    isScrollBarDragging: false,
-    scrollBarDragOffsetY: 0
-  };
-};
-
-const getWheelDeltaY = (deltaMode, deltaY, itemHeight, height) => {
-  switch (deltaMode) {
-    case 1:
-      return deltaY * itemHeight;
-    case 2:
-      return deltaY * height;
-    default:
-      return deltaY;
+const getBaseContentRight = state => {
+  if (state.inputValue && state.contentRight.startsWith(state.inputValue)) {
+    return state.contentRight.slice(state.inputValue.length);
   }
+  return state.contentRight;
 };
+const deleteRight = async state => {
+  // If there is an active input buffer, let applyEditInput handle changes via HandleInput
+  if (state.inputValue) {
+    return state;
+  }
+  const baseContent = getBaseContentRight(state);
+  const cursorRow = Math.max(0, Math.min(state.rightEditor.cursorRowIndex, getLineCount(baseContent) - 1));
+  const lines = baseContent.split('\n');
+  const currentLine = lines[cursorRow] ?? '';
+  const cursorCol = Math.max(0, Math.min(state.rightEditor.cursorColumnIndex, currentLine.length));
 
-const handleWheel = (state, deltaMode, eventDeltaY) => {
-  if (!state.scrollBarActive) {
+  // compute absolute index
+  let index = 0;
+  for (let i = 0; i < cursorRow; i++) {
+    index += (lines[i] ?? '').length + 1;
+  }
+  index += cursorCol;
+  if (index >= baseContent.length) {
     return state;
   }
+  const contentRight = baseContent.slice(0, index) + baseContent.slice(index + 1);
   const {
-    contentLeft,
-    contentRight,
-    deltaY,
-    height,
-    inlineChanges,
-    itemHeight,
-    minimumSliderSize,
-    tokenizedLinesLeft,
-    tokenizedLinesRight,
-    totalLineCount,
-    totalLineCountLeft,
-    totalLineCountRight
+    totalLineCountLeft
   } = state;
-  const nextDeltaY = deltaY + getWheelDeltaY(deltaMode, eventDeltaY, itemHeight, height);
-  const scrollState = getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, nextDeltaY);
+  const totalLineCountRight = getLineCount(contentRight);
+  const canComputeInlineDiff = state.renderModeLeft === 'text' && !state.errorLeftMessage;
   const {
-    visibleLinesLeft,
-    visibleLinesRight
-  } = getVisibleLinesState({
-    contentLeft,
+    inlineChanges,
+    totalLineCount
+  } = canComputeInlineDiff ? await getInlineDiffState(state.contentLeft, contentRight) : {
+    inlineChanges: [],
+    totalLineCount: Math.max(totalLineCountLeft, totalLineCountRight)
+  };
+  const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
+  const nextState = {
+    ...state,
     contentRight,
+    gutterWidthVariable: getGutterWidthVariable(Math.max(totalLineCountLeft, totalLineCountRight)),
     inlineChanges,
-    maxLineY: scrollState.maxLineY,
-    minLineY: scrollState.minLineY,
-    tokenizedLinesLeft,
-    tokenizedLinesRight,
+    inputSource: User,
+    inputValue: '',
+    scrollBarBackgroundImage: getScrollBarBackgroundImage(inlineChanges, totalLineCount),
+    tokenizedLinesRight: [],
+    totalLineCount,
     totalLineCountLeft,
-    totalLineCountRight
-  });
+    totalLineCountRight,
+    ...scrollState
+  };
   return {
-    ...state,
-    ...scrollState,
-    visibleLinesLeft,
-    visibleLinesRight
+    ...nextState,
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
   };
 };
 
-const sendMessagePortToExtensionHostWorker = async port => {
-  await sendMessagePortToExtensionHostWorker$1(port, 0);
+const isEqual$3 = (oldState, newState) => {
+  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.finalDeltaY === newState.finalDeltaY && oldState.gutterWidthVariable === newState.gutterWidthVariable && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.layout === newState.layout && oldState.leftWidth === newState.leftWidth && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.rightEditor.cursorColumnIndex === newState.rightEditor.cursorColumnIndex && oldState.rightEditor.cursorRowIndex === newState.rightEditor.cursorRowIndex && oldState.rightWidth === newState.rightWidth && oldState.scrollBarBackgroundImage === newState.scrollBarBackgroundImage && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.totalLineCount === newState.totalLineCount;
 };
 
-const createExtensionHostRpc = async () => {
-  try {
-    const rpc = await create$4({
-      commandMap: {},
-      send: sendMessagePortToExtensionHostWorker
-    });
-    set$6(rpc);
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
-  }
+const isEqual$2 = (oldState, newState) => {
+  return oldState.focus === newState.focus && oldState.focusVersion === newState.focusVersion;
 };
 
-const sendMessagePortToTextMeasurementWorker = async port => {
-  await sendMessagePortToTextMeasurementWorker$1(port);
+const isEqual$1 = (oldState, newState) => {
+  return oldState.contentLeft === newState.contentLeft && oldState.contentRight === newState.contentRight && oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.lineNumbers === newState.lineNumbers && oldState.layout === newState.layout && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.searchVisible === newState.searchVisible && oldState.showWhitespace === newState.showWhitespace;
 };
 
-const createTextMeasurementWorkerRpc = async () => {
-  try {
-    const rpc = await create$4({
-      commandMap: {},
-      send: sendMessagePortToTextMeasurementWorker
-    });
-    set$2(rpc);
-  } catch (error) {
-    throw new VError(error, `Failed to create text measurement rpc`);
-  }
-};
+const RenderItems = 4;
+const RenderFocus = 6;
+const RenderFocusContext = 7;
+const RenderValue = 8;
+const RenderCss = 10;
+const RenderIncremental = 11;
 
-const initializeDiffWorker = async () => {
-  const rpc = await create$3({
-    commandMap: {},
-    send(port) {
-      return sendMessagePortToDiffWorker(port, 0);
-    }
-  });
-  set$8(rpc);
+const isEqual = (oldState, newState) => {
+  return newState.inputSource === User$1 || oldState.inputValue === newState.inputValue;
 };
 
-const initializeErrorWorker = async () => {
-  const rpc = await create$3({
-    commandMap: {},
-    send(port) {
-      return sendMessagePortToErrorWorker(port, 0);
+const modules = [isEqual$1, isEqual, isEqual$3, isEqual$2, isEqual$2];
+const numbers = [RenderIncremental, RenderValue, RenderCss, RenderFocus, RenderFocusContext];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
     }
-  });
-  set$7(rpc);
+  }
+  return diffResult;
 };
 
-const createExtensionManagementWorkerRpc = async () => {
-  const rpc = await create$3({
-    commandMap: {},
-    send: port => sendMessagePortToExtensionManagementWorker(port, 0)
-  });
-  return rpc;
+const diff2 = uid => {
+  const {
+    newState,
+    oldState
+  } = get(uid);
+  const result = diff(oldState, newState);
+  return result;
 };
 
-const initializeExtensionManagementWorker = async () => {
-  const rpc = await createExtensionManagementWorkerRpc();
-  set$5(rpc);
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
 
-const initializeFileSystemWorker = async () => {
-  const rpc = await create$3({
-    commandMap: {},
-    send(port) {
-      return sendMessagePortToFileSystemWorker(port, 0);
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
+};
+
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
+};
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
+};
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
+  }
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
+  }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
+};
+
+const compareNodes = (oldNode, newNode) => {
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
+  }
+  const patches = [];
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference) {
+    if (oldNode.uid !== newNode.uid) {
+      patches.push({
+        type: SetReferenceNodeUid,
+        uid: newNode.uid
+      });
+    }
+    return patches;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
+      });
+    }
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!Object.hasOwn(newNode, key)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
     }
+  }
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
+  }
+  return result;
+};
+
+const navigateToChild = (patches, currentChildIndex, index) => {
+  if (currentChildIndex === -1) {
+    patches.push({
+      type: NavigateChild,
+      index
+    });
+    return index;
+  }
+  if (currentChildIndex !== index) {
+    patches.push({
+      type: NavigateSibling,
+      index
+    });
+  }
+  return index;
+};
+const navigateToParent = (patches, currentChildIndex) => {
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+  }
+  return -1;
+};
+const addTree = (newNode, patches) => {
+  patches.push({
+    type: Add,
+    nodes: treeToArray(newNode)
   });
-  set$4(rpc);
+};
+const replaceTree = (newNode, patches) => {
+  patches.push({
+    type: Replace,
+    nodes: treeToArray(newNode)
+  });
+};
+const diffExistingChild = (oldNode, newNode, patches, currentChildIndex, index) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+    replaceTree(newNode, patches);
+    return nextChildIndex;
+  }
+  const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+  if (nodePatches.length === 0 && !hasChildrenToCompare) {
+    return currentChildIndex;
+  }
+  const nextChildIndex = navigateToChild(patches, currentChildIndex, index);
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (hasChildrenToCompare) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+  return nextChildIndex;
+};
+const diffRootNode = (oldNode, newNode, patches) => {
+  const nodePatches = compareNodes(oldNode.node, newNode.node);
+  if (nodePatches === null) {
+    replaceTree(newNode, patches);
+    return;
+  }
+  if (nodePatches.length > 0) {
+    patches.push(...nodePatches);
+  }
+  if (oldNode.children.length > 0 || newNode.children.length > 0) {
+    diffChildren(oldNode.children, newNode.children, patches);
+  }
+};
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  let currentChildIndex = -1;
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
+    }
+    if (!oldNode) {
+      currentChildIndex = navigateToParent(patches, currentChildIndex);
+      addTree(newNode, patches);
+      continue;
+    }
+    if (!newNode) {
+      indicesToRemove.push(i);
+      continue;
+    }
+    currentChildIndex = diffExistingChild(oldNode, newNode, patches, currentChildIndex, i);
+  }
+  navigateToParent(patches, currentChildIndex);
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    diffRootNode(oldTree[0], newTree[0], patches);
+    return;
+  }
+  diffChildren(oldTree, newTree, patches);
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
+const FocusDiffEditorText = 812_221;
+
+const getKeyBindings = () => {
+  return [{
+    command: 'DiffView.insertLineBreak',
+    key: Enter,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.deleteLeft',
+    key: Backspace,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.deleteRight',
+    key: Delete,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.moveCursorLeft',
+    key: LeftArrow,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.moveCursorRight',
+    key: RightArrow,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.moveCursorUp',
+    key: UpArrow,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.moveCursorDown',
+    key: DownArrow,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.moveCursorToStartOfLine',
+    key: Home,
+    when: FocusDiffEditorText
+  }, {
+    command: 'DiffView.moveCursorToEndOfLine',
+    key: End,
+    when: FocusDiffEditorText
+  }];
+};
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const Copy = 'Copy';
+const Cut = 'Cut';
+const HideWhitespace = 'Hide whitespace';
+const IncomingChange = 'Incoming Change';
+const Inline = 'Inline';
+const Paste = 'Paste';
+const Search = 'Search';
+const ShowWhitespace = 'Show whitespace';
+const SideBySide = 'Side by side';
+const AcceptCurrentChangeAcceptIncomingChangeAcceptBoth = 'Accept current change | Accept incoming change | Accept both';
+const SwitchToDiff = 'Switch to {PH1} diff';
+
+const copy = () => {
+  return i18nString(Copy);
+};
+const acceptCurrentChangeAcceptIncomingChangeAcceptBoth = () => {
+  return i18nString(AcceptCurrentChangeAcceptIncomingChangeAcceptBoth);
+};
+const cut = () => {
+  return i18nString(Cut);
+};
+const hideWhitespace = () => {
+  return i18nString(HideWhitespace);
+};
+const incomingChange = () => {
+  return i18nString(IncomingChange);
+};
+const inline = () => {
+  return i18nString(Inline);
+};
+const paste = () => {
+  return i18nString(Paste);
+};
+const search = () => {
+  return i18nString(Search);
+};
+const showWhitespace = () => {
+  return i18nString(ShowWhitespace);
+};
+const sideBySide = () => {
+  return i18nString(SideBySide);
+};
+const switchToDiff = label => {
+  return i18nString(SwitchToDiff, {
+    PH1: label
+  });
+};
+
+const RestoreFocus = 6;
+
+const menuEntryCut = {
+  command: 'DiffView.handleCut',
+  flags: RestoreFocus,
+  id: 'cut',
+  label: cut()
+};
+const menuEntryCopy = {
+  command: 'DiffView.handleCopy',
+  flags: RestoreFocus,
+  id: 'copy',
+  label: copy()
+};
+const menuEntryPaste = {
+  command: 'DiffView.handlePaste',
+  flags: RestoreFocus,
+  id: 'paste',
+  label: paste()
+};
+const getMenuEntries = () => {
+  return [menuEntryCut, menuEntryCopy, menuEntryPaste];
+};
+
+const getMenuEntries2 = state => {
+  return getMenuEntries();
+};
+
+const Diff = 321_678;
+
+const getMenuIds = () => {
+  return [Diff];
+};
+
+const handleBeforeInput = async (state, inputType, data) => {
+  switch (inputType) {
+    case 'insertText':
+      {
+        const newInputValue = `${state.inputValue ?? ''}${data ?? ''}`;
+        return applyEditInput(state, newInputValue);
+      }
+    default:
+      return state;
+  }
+};
+
+const ToggleDiffMode = 'toggleDiffMode';
+const ToggleWhitespace = 'toggleWhitespace';
+
+const InlineDiffRowType$1 = {
+  Context: 'context',
+  Deletion: 'deletion',
+  GitButtons: 'git-buttons',
+  IncomingChange: 'incoming-change',
+  Insertion: 'insertion'
+};
+
+const getContextRow = (lineNumberLeft, lineNumberRight, text) => ({
+  lineNumberLeft,
+  lineNumberRight,
+  text,
+  type: InlineDiffRowType$1.Context
+});
+
+const getDeletionRow = (lineNumberLeft, text) => ({
+  lineNumberLeft,
+  lineNumberRight: null,
+  text,
+  type: InlineDiffRowType$1.Deletion
+});
+
+const getInsertionRow = (lineNumberRight, text) => ({
+  lineNumberLeft: null,
+  lineNumberRight,
+  text,
+  type: InlineDiffRowType$1.Insertion
+});
+
+const getLines$1 = content => {
+  return content ? content.split('\n') : [''];
+};
+
+const lookAheadLimit = 3;
+const findLookAheadMatch = (lines, startIndex, needle) => {
+  const endIndex = Math.min(startIndex + lookAheadLimit, lines.length - 1);
+  for (let i = startIndex; i <= endIndex; i++) {
+    if (lines[i] === needle) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+const getDeletionRows = (lines, startIndex, endIndex, startLineNumber) => {
+  const rows = [];
+  for (let index = startIndex; index < endIndex; index++) {
+    rows.push(getDeletionRow(startLineNumber + index - startIndex, lines[index]));
+  }
+  return rows;
+};
+
+const getInsertionRows = (lines, startIndex, endIndex, startLineNumber) => {
+  const rows = [];
+  for (let index = startIndex; index < endIndex; index++) {
+    rows.push(getInsertionRow(startLineNumber + index - startIndex, lines[index]));
+  }
+  return rows;
+};
+
+const getLookAheadRows = (leftLines, rightLines, leftIndex, rightIndex, leftLineNumber, rightLineNumber) => {
+  const leftLine = leftLines[leftIndex];
+  const rightLine = rightLines[rightIndex];
+  const leftMatch = findLookAheadMatch(leftLines, leftIndex + 1, rightLine);
+  const rightMatch = findLookAheadMatch(rightLines, rightIndex + 1, leftLine);
+  if (leftMatch !== -1 && (rightMatch === -1 || leftMatch - leftIndex <= rightMatch - rightIndex)) {
+    return {
+      leftCount: leftMatch - leftIndex,
+      rightCount: 0,
+      rows: getDeletionRows(leftLines, leftIndex, leftMatch, leftLineNumber)
+    };
+  }
+  if (rightMatch !== -1) {
+    return {
+      leftCount: 0,
+      rightCount: rightMatch - rightIndex,
+      rows: getInsertionRows(rightLines, rightIndex, rightMatch, rightLineNumber)
+    };
+  }
+  return undefined;
+};
+
+const InlineDiffRowType = InlineDiffRowType$1;
+const conflictStartMarker = '<<<<<<< ';
+const conflictDividerMarker = '=======';
+const conflictEndMarker = '>>>>>>>';
+const getGitButtonsRow = () => {
+  return {
+    lineNumberLeft: null,
+    lineNumberRight: null,
+    text: acceptCurrentChangeAcceptIncomingChangeAcceptBoth(),
+    type: InlineDiffRowType$1.GitButtons
+  };
+};
+const getIncomingChangeRow = () => {
+  return {
+    lineNumberLeft: null,
+    lineNumberRight: null,
+    text: incomingChange(),
+    type: InlineDiffRowType$1.IncomingChange
+  };
+};
+const isConflictStart = text => {
+  return text.startsWith(conflictStartMarker);
+};
+const isConflictDivider = text => {
+  return text === conflictDividerMarker;
+};
+const isConflictEnd = text => {
+  return text.startsWith(conflictEndMarker);
+};
+const addConflictDecoratorRows = rows => {
+  const decoratedRows = [];
+  let insideConflict = false;
+  for (const row of rows) {
+    if (isConflictStart(row.text)) {
+      decoratedRows.push(getGitButtonsRow());
+      insideConflict = true;
+    }
+    decoratedRows.push(row);
+    if (insideConflict && isConflictDivider(row.text)) {
+      decoratedRows.push(getIncomingChangeRow());
+    }
+    if (insideConflict && isConflictEnd(row.text)) {
+      insideConflict = false;
+    }
+  }
+  return decoratedRows;
+};
+const getInlineDiffRows = (contentLeft, contentRight) => {
+  const leftLines = getLines$1(contentLeft);
+  const rightLines = getLines$1(contentRight);
+  const rows = [];
+  let leftIndex = 0;
+  let rightIndex = 0;
+  let leftLineNumber = 1;
+  let rightLineNumber = 1;
+  while (leftIndex < leftLines.length || rightIndex < rightLines.length) {
+    const leftLine = leftLines[leftIndex];
+    const rightLine = rightLines[rightIndex];
+    if (leftIndex < leftLines.length && rightIndex < rightLines.length && leftLine === rightLine) {
+      rows.push(getContextRow(leftLineNumber, rightLineNumber, leftLine));
+      leftIndex++;
+      rightIndex++;
+      leftLineNumber++;
+      rightLineNumber++;
+      continue;
+    }
+    if (leftIndex < leftLines.length && rightIndex < rightLines.length) {
+      const lookAheadRows = getLookAheadRows(leftLines, rightLines, leftIndex, rightIndex, leftLineNumber, rightLineNumber);
+      if (lookAheadRows) {
+        rows.push(...lookAheadRows.rows);
+        leftIndex += lookAheadRows.leftCount;
+        leftLineNumber += lookAheadRows.leftCount;
+        rightIndex += lookAheadRows.rightCount;
+        rightLineNumber += lookAheadRows.rightCount;
+        continue;
+      }
+    }
+    if (leftIndex < leftLines.length) {
+      rows.push(getDeletionRow(leftLineNumber, leftLines[leftIndex]));
+      leftIndex++;
+      leftLineNumber++;
+    }
+    if (rightIndex < rightLines.length) {
+      rows.push(getInsertionRow(rightLineNumber, rightLines[rightIndex]));
+      rightIndex++;
+      rightLineNumber++;
+    }
+  }
+  return addConflictDecoratorRows(rows);
+};
+
+const getDisplayedContent = (content, errorMessage, errorCodeFrame, errorStack) => {
+  if (!errorMessage) {
+    return content;
+  }
+  return [errorMessage, errorCodeFrame, errorStack].filter(Boolean).join('\n\n');
+};
+const getTotalLineCount = (diffMode, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack, renderModeLeft, renderModeRight) => {
+  if (diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage) {
+    return getInlineDiffRows(contentLeft, contentRight).length;
+  }
+  return Math.max(renderModeLeft === 'image' ? 1 : getLineCount(getDisplayedContent(contentLeft, errorLeftMessage, errorLeftCodeFrame, errorLeftStack)), renderModeRight === 'image' ? 1 : getLineCount(getDisplayedContent(contentRight, errorRightMessage, errorRightCodeFrame, errorRightStack)));
+};
+
+const setDiffMode = (state, diffMode) => {
+  if (state.diffMode === diffMode) {
+    return state;
+  }
+  const totalLineCount = getTotalLineCount(diffMode, state.contentLeft, state.contentRight, state.errorLeftMessage, state.errorLeftCodeFrame, state.errorLeftStack, state.errorRightMessage, state.errorRightCodeFrame, state.errorRightStack, state.renderModeLeft, state.renderModeRight);
+  const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
+  const scrollBarBackgroundImage = getScrollBarBackgroundImage(state.inlineChanges, totalLineCount);
+  const nextState = {
+    ...state,
+    diffMode,
+    scrollBarBackgroundImage,
+    totalLineCount,
+    ...scrollState
+  };
+  return {
+    ...nextState,
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
+  };
 };
 
-const initializeSyntaxHighlightingWorker = async () => {
-  const rpc = await create$3({
-    commandMap: {},
-    send(port) {
-      return sendMessagePortToSyntaxHighlightingWorker(port);
+const toggleDiffMode = state => {
+  const nextDiffMode = state.diffMode === 'inline' ? 'side-by-side' : 'inline';
+  return setDiffMode(state, nextDiffMode);
+};
+
+const toggleWhitespace = state => {
+  return {
+    ...state,
+    showWhitespace: !state.showWhitespace
+  };
+};
+
+const handleClickAction = (state, targetName) => {
+  if (targetName === ToggleDiffMode) {
+    return toggleDiffMode(state);
+  }
+  if (targetName === ToggleWhitespace) {
+    return toggleWhitespace(state);
+  }
+  return state;
+};
+
+const DefaultCharWidth = 9;
+const LineHeight = 20;
+const GutterPaddingWidth = 28;
+const RowPaddingLeft = 12;
+const getCharWidth = state => {
+  return state.charWidth ?? DefaultCharWidth;
+};
+
+const getCursorPositionFromCoordinates = (state, clientX, clientY) => {
+  const contentLeft = state.layout === 'vertical' ? state.x : state.x + state.leftWidth;
+  const contentTop = state.layout === 'vertical' ? state.y + state.leftWidth : state.y;
+  const gutterWidth = state.lineNumbers ? state.gutterWidthVariable + GutterPaddingWidth : 0;
+  const charWidth = getCharWidth(state);
+  const rawCursorColumnIndex = Math.floor((clientX - contentLeft - gutterWidth - RowPaddingLeft) / charWidth);
+  const rawCursorRowIndex = state.minLineY + Math.floor((clientY - contentTop) / LineHeight);
+  const maxCursorRowIndex = Math.max(state.totalLineCountRight - 1, 0);
+  return {
+    cursorColumnIndex: Math.max(rawCursorColumnIndex, 0),
+    cursorRowIndex: Math.min(Math.max(rawCursorRowIndex, 0), maxCursorRowIndex)
+  };
+};
+
+const setCursorPosition = (state, cursorColumnIndex, cursorRowIndex) => {
+  return {
+    ...state,
+    rightEditor: {
+      ...state.rightEditor,
+      cursorColumnIndex,
+      cursorRowIndex
     }
+  };
+};
+
+const handleClickRightSide = (state, clientX, clientY) => {
+  const cursorPosition = getCursorPositionFromCoordinates(state, clientX, clientY);
+  const focusedState = {
+    ...state,
+    focus: FocusDiffEditorText,
+    focusVersion: state.focusVersion + 1
+  };
+  return setCursorPosition(focusedState, cursorPosition.cursorColumnIndex, cursorPosition.cursorRowIndex);
+};
+
+const handleClickAt = (state, clientX, clientY, targetName) => {
+  const isVertical = state.layout === 'vertical';
+  const isRightSide = isVertical ? clientY >= state.y + state.leftWidth : clientX >= state.x + state.leftWidth;
+  if (!isRightSide) {
+    return state;
+  }
+  return handleClickRightSide(state, clientX, clientY);
+};
+
+const handleClickLeftSide = state => {
+  return state;
+};
+
+const show2 = async (uid, menuId, x, y, args) => {
+  await showContextMenu2(uid, menuId, x, y, args);
+};
+
+const handleContextMenu = async (state, button, clientX, clientY) => {
+  await show2(state.id, Diff, clientX, clientY, {
+    menuId: Diff
   });
-  set$1(rpc);
+  return state;
 };
 
-const initialize = async () => {
-  await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeDiffWorker(), initializeExtensionManagementWorker(), initializeFileSystemWorker(), initializeErrorWorker(), initializeSyntaxHighlightingWorker()]);
+const handleCopy = state => {
+  return state;
 };
 
-const inlineDiffPrefix = 'inline-diff://';
-const diffPrefix = 'diff://';
-const diffSeparator = '<->';
-const parseDiffUris = contentPart => {
-  const separatorIndex = contentPart.indexOf(diffSeparator);
-  if (separatorIndex === -1) {
-    return ['', contentPart];
+const handleCut = state => {
+  return state;
+};
+
+const handleInput = async (state, value) => {
+  return applyEditInput(state, value);
+};
+
+const handlePaste = state => {
+  return state;
+};
+
+const getNextPaneSizes = (state, layout, width, height) => {
+  const totalPaneSize = state.leftWidth + state.rightWidth;
+  const ratio = totalPaneSize === 0 ? 0.5 : state.leftWidth / totalPaneSize;
+  const size = layout === 'vertical' ? height : width;
+  return getPaneSizes(size, ratio);
+};
+
+const handleResize = (state, {
+  height,
+  width
+}) => {
+  // const {} = state
+  if (state.width === width && state.height === height) {
+    return state;
   }
-  const uriLeft = contentPart.slice(0, separatorIndex);
-  const uriRight = contentPart.slice(separatorIndex + diffSeparator.length);
-  return [uriLeft, uriRight];
+  const {
+    leftWidth,
+    rightWidth
+  } = getNextPaneSizes(state, state.layout, width, height);
+  const scrollState = getScrollState(height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, state.deltaY);
+  const nextState = {
+    ...state,
+    height,
+    leftWidth,
+    rightWidth,
+    width,
+    ...scrollState
+  };
+  return {
+    ...nextState,
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
+  };
 };
-const getInlineDiffUris = uri => {
-  if (uri.startsWith(inlineDiffPrefix)) {
-    return parseDiffUris(uri.slice(inlineDiffPrefix.length));
+
+const handleSashPointerDown = (state, clientX, clientY) => {
+  const {
+    layout,
+    leftWidth,
+    x,
+    y
+  } = state;
+  const isVertical = layout === 'vertical';
+  return {
+    ...state,
+    isResizing: true,
+    resizeOffsetX: isVertical ? 0 : clientX - x - leftWidth,
+    resizeOffsetY: isVertical ? clientY - y - leftWidth : 0
+  };
+};
+
+const getSashPointerMoveWidths = (state, clientX, clientY) => {
+  const {
+    height,
+    layout,
+    resizeOffsetX,
+    resizeOffsetY,
+    width,
+    x,
+    y
+  } = state;
+  if (layout === 'vertical') {
+    const rawTopHeight = clientY - y - resizeOffsetY;
+    const leftWidth = getClampedPaneSize(height, rawTopHeight);
+    const rightWidth = getRemainingPaneSize(height, leftWidth);
+    return {
+      leftWidth,
+      rightWidth
+    };
   }
-  if (uri.startsWith(diffPrefix)) {
-    return parseDiffUris(uri.slice(diffPrefix.length));
-  } else {
-    return ['', uri];
+  const rawLeftWidth = clientX - x - resizeOffsetX;
+  const leftWidth = getClampedLeftWidth(width, rawLeftWidth);
+  const rightWidth = getRightWidth(width, leftWidth);
+  return {
+    leftWidth,
+    rightWidth
+  };
+};
+const handleSashPointerMove = (state, clientX, clientY) => {
+  const {
+    isResizing
+  } = state;
+  if (!isResizing) {
+    return state;
   }
+  const {
+    leftWidth,
+    rightWidth
+  } = getSashPointerMoveWidths(state, clientX, clientY);
+  return {
+    ...state,
+    leftWidth,
+    rightWidth
+  };
 };
 
-const getMinLineY = savedState => {
-  if (!savedState || typeof savedState !== 'object') {
+const handleSashPointerUp = (state, clientX, clientY) => {
+  if (!state.isResizing) {
+    return state;
+  }
+  const {
+    leftWidth,
+    rightWidth
+  } = getSashPointerMoveWidths(state, clientX, clientY);
+  return {
+    ...state,
+    isResizing: false,
+    leftWidth,
+    resizeOffsetX: 0,
+    resizeOffsetY: 0,
+    rightWidth
+  };
+};
+
+const getScrollBarThumbTop = (height, scrollBarHeight, deltaY, finalDeltaY) => {
+  const scrollRange = Math.max(height - scrollBarHeight, 0);
+  if (scrollRange === 0 || finalDeltaY <= 0) {
+    return 0;
+  }
+  return deltaY / finalDeltaY * scrollRange;
+};
+
+const normalizeFloatingPointError = value => {
+  return Number(value.toPrecision(16));
+};
+const handleScrollBarPointerDown = (state, clientY) => {
+  if (!state.scrollBarActive) {
+    return state;
+  }
+  const thumbTop = getScrollBarThumbTop(state.height, state.scrollBarHeight, state.deltaY, state.finalDeltaY);
+  return {
+    ...state,
+    isScrollBarDragging: true,
+    scrollBarDragOffsetY: normalizeFloatingPointError(clientY - state.y - thumbTop)
+  };
+};
+
+const getDeltaYFromScrollBarThumbTop = (height, scrollBarHeight, thumbTop, finalDeltaY) => {
+  const scrollRange = Math.max(height - scrollBarHeight, 0);
+  if (scrollRange === 0 || finalDeltaY <= 0) {
     return 0;
   }
+  const clampedThumbTop = Math.min(Math.max(thumbTop, 0), scrollRange);
+  return clampedThumbTop / scrollRange * finalDeltaY;
+};
+
+const handleScrollBarPointerMove = (state, clientY) => {
+  if (!state.isScrollBarDragging) {
+    return state;
+  }
+  const thumbTop = clientY - state.y - state.scrollBarDragOffsetY;
+  const deltaY = getDeltaYFromScrollBarThumbTop(state.height, state.scrollBarHeight, thumbTop, state.finalDeltaY);
+  const scrollState = getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, deltaY);
+  return {
+    ...state,
+    ...scrollState,
+    ...getVisibleLinesState({
+      contentLeft: state.contentLeft,
+      contentRight: state.contentRight,
+      inlineChanges: state.inlineChanges,
+      maxLineY: scrollState.maxLineY,
+      minLineY: scrollState.minLineY,
+      tokenizedLinesLeft: state.tokenizedLinesLeft,
+      tokenizedLinesRight: state.tokenizedLinesRight,
+      totalLineCountLeft: state.totalLineCountLeft,
+      totalLineCountRight: state.totalLineCountRight
+    })
+  };
+};
+
+const handleScrollBarPointerUp = (state, clientY) => {
+  const nextState = handleScrollBarPointerMove(state, clientY);
+  return {
+    ...nextState,
+    isScrollBarDragging: false,
+    scrollBarDragOffsetY: 0
+  };
+};
+
+const handleSearchInput = async (state, value) => {
+  return {
+    ...state,
+    searchQuery: value
+  };
+};
+
+const getWheelDeltaY = (deltaMode, deltaY, itemHeight, height) => {
+  switch (deltaMode) {
+    case 1:
+      return deltaY * itemHeight;
+    case 2:
+      return deltaY * height;
+    default:
+      return deltaY;
+  }
+};
+
+const handleWheel = (state, deltaMode, eventDeltaY) => {
+  if (!state.scrollBarActive) {
+    return state;
+  }
   const {
-    minLineY
-  } = savedState;
-  if (typeof minLineY === 'number') {
-    return minLineY;
-  }
-  return 0;
+    contentLeft,
+    contentRight,
+    deltaY,
+    height,
+    inlineChanges,
+    itemHeight,
+    minimumSliderSize,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCount,
+    totalLineCountLeft,
+    totalLineCountRight
+  } = state;
+  const nextDeltaY = deltaY + getWheelDeltaY(deltaMode, eventDeltaY, itemHeight, height);
+  const scrollState = getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, nextDeltaY);
+  const {
+    visibleLinesLeft,
+    visibleLinesRight
+  } = getVisibleLinesState({
+    contentLeft,
+    contentRight,
+    inlineChanges,
+    maxLineY: scrollState.maxLineY,
+    minLineY: scrollState.minLineY,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCountLeft,
+    totalLineCountRight
+  });
+  return {
+    ...state,
+    ...scrollState,
+    visibleLinesLeft,
+    visibleLinesRight
+  };
 };
 
 const getErrorMessage = error => {
@@ -2097,393 +3557,117 @@ const normalizePreparedError = (error, preparedError) => {
 };
 const prepareError = async error => {
   try {
-    const preparedError = await invoke$4('Errors.prepare', error);
-    return normalizePreparedError(error, preparedError);
-  } catch {
-    return normalizePreparedError(error, undefined);
-  }
-};
-
-const getPath = (protocol, uri) => {
-  if (!uri) {
-    return '';
-  }
-  if (protocol === 'file' && !uri.startsWith('file://')) {
-    return uri;
-  }
-  return uri.slice(protocol.length + 3);
-};
-
-const protocolRegex = /^([a-z-]+):\/\//;
-const getProtocol = uri => {
-  if (!uri) {
-    return 'file';
-  }
-  const match = uri.match(protocolRegex);
-  if (match) {
-    return match[1];
-  }
-  return 'file';
-};
-
-const windowsDriveLetterRegex = /^[a-zA-Z]:\\/;
-const encodeFilePath = path => {
-  return encodeURI(path).replaceAll('#', '%23').replaceAll('?', '%3F');
-};
-const toFileUri = path => {
-  if (path.startsWith('file://')) {
-    return path;
-  }
-  if (windowsDriveLetterRegex.test(path)) {
-    const normalizedPath = path.replaceAll('\\', '/');
-    return `file:///${encodeFilePath(normalizedPath)}`;
-  }
-  return `file://${encodeFilePath(path)}`;
-};
-
-const readFile = async uri => {
-  if (!uri || uri.startsWith('untitled://')) {
-    return '';
-  }
-  const protocol = getProtocol(uri);
-  if (protocol === 'data') {
-    return uri.slice('data://'.length);
-  }
-  if (protocol === 'file') {
-    return readFile$1(toFileUri(uri));
-  }
-  const path = getPath(protocol, uri);
-  if (protocol === 'memfs') {
-    return invoke$3('FileSystemMemory.readFile', path);
-  }
-  return invoke$3('ExtensionHostFileSystem.readFile', protocol, path);
-};
-
-const loadFileContent = async uri => {
-  try {
-    const content = await readFile(uri);
-    return {
-      content,
-      errorCodeFrame: '',
-      errorMessage: '',
-      errorStack: ''
-    };
-  } catch (error) {
-    const prettyError = await prepareError(error);
-    return {
-      content: '',
-      errorCodeFrame: prettyError.codeFrame,
-      errorMessage: prettyError.message,
-      errorStack: prettyError.stack
-    };
-  }
-};
-
-const loadFileContents = async (uriLeft, uriRight) => {
-  const [leftResult, rightResult] = await Promise.all([loadFileContent(uriLeft), loadFileContent(uriRight)]);
-  return {
-    contentLeft: leftResult.content,
-    contentRight: rightResult.content,
-    errorLeftCodeFrame: leftResult.errorCodeFrame,
-    errorLeftMessage: leftResult.errorMessage,
-    errorLeftStack: leftResult.errorStack,
-    errorRightCodeFrame: rightResult.errorCodeFrame,
-    errorRightMessage: rightResult.errorMessage,
-    errorRightStack: rightResult.errorStack
-  };
-};
-
-const lineNumberCharWidth = 9;
-const getGutterWidthVariable = maxLineNumber => {
-  const maxLineNumberCharCount = String(Math.max(maxLineNumber, 1)).length;
-  return maxLineNumberCharCount * lineNumberCharWidth;
-};
-
-const getInlineDiffChanges = (linesLeft, linesRight) => {
-  return invoke$5('Diff.diffInline', linesLeft, linesRight);
-};
-
-const getInlineDiffState = async (contentLeft, contentRight) => {
-  const linesLeft = contentLeft ? contentLeft.split('\n') : [''];
-  const linesRight = contentRight ? contentRight.split('\n') : [''];
-  const inlineChanges = await getInlineDiffChanges(linesLeft, linesRight);
-  return {
-    inlineChanges,
-    totalLineCount: Math.max(getVisibleInlineDiffRows(inlineChanges).length, 1)
-  };
-};
-
-const getLineCount = content => {
-  if (!content) {
-    return 1;
-  }
-  return content.split('\n').length;
-};
-
-const getFileExtension = uri => {
-  const protocol = getProtocol(uri);
-  const path = getPath(protocol, uri);
-  const cleanPath = path.split('?')[0].split('#')[0];
-  const extensionIndex = cleanPath.lastIndexOf('.');
-  if (extensionIndex === -1) {
-    return '';
-  }
-  return cleanPath.slice(extensionIndex).toLowerCase();
-};
-const getRenderMode = (uri, knownImageExtensions) => {
-  const extension = getFileExtension(uri);
-  if (knownImageExtensions.includes(extension)) {
-    return 'image';
-  }
-  return 'text';
-};
-
-const InlineDiffRowType = {
-  Context: 'context',
-  Deletion: 'deletion',
-  Insertion: 'insertion'
-};
-const lookAheadLimit = 3;
-const getLines = content => {
-  return content ? content.split('\n') : [''];
-};
-const findLookAheadMatch = (lines, startIndex, needle) => {
-  const endIndex = Math.min(startIndex + lookAheadLimit, lines.length - 1);
-  for (let i = startIndex; i <= endIndex; i++) {
-    if (lines[i] === needle) {
-      return i;
-    }
-  }
-  return -1;
-};
-const getInlineDiffRows = (contentLeft, contentRight) => {
-  const leftLines = getLines(contentLeft);
-  const rightLines = getLines(contentRight);
-  const rows = [];
-  let leftIndex = 0;
-  let rightIndex = 0;
-  let leftLineNumber = 1;
-  let rightLineNumber = 1;
-  while (leftIndex < leftLines.length || rightIndex < rightLines.length) {
-    const leftLine = leftLines[leftIndex];
-    const rightLine = rightLines[rightIndex];
-    if (leftIndex < leftLines.length && rightIndex < rightLines.length && leftLine === rightLine) {
-      rows.push({
-        lineNumberLeft: leftLineNumber,
-        lineNumberRight: rightLineNumber,
-        text: leftLine,
-        type: InlineDiffRowType.Context
-      });
-      leftIndex++;
-      rightIndex++;
-      leftLineNumber++;
-      rightLineNumber++;
-      continue;
-    }
-    if (leftIndex < leftLines.length && rightIndex < rightLines.length) {
-      const leftMatch = findLookAheadMatch(leftLines, leftIndex + 1, rightLine);
-      const rightMatch = findLookAheadMatch(rightLines, rightIndex + 1, leftLine);
-      if (leftMatch !== -1 && (rightMatch === -1 || leftMatch - leftIndex <= rightMatch - rightIndex)) {
-        while (leftIndex < leftMatch) {
-          rows.push({
-            lineNumberLeft: leftLineNumber,
-            lineNumberRight: null,
-            text: leftLines[leftIndex],
-            type: InlineDiffRowType.Deletion
-          });
-          leftIndex++;
-          leftLineNumber++;
-        }
-        continue;
-      }
-      if (rightMatch !== -1) {
-        while (rightIndex < rightMatch) {
-          rows.push({
-            lineNumberLeft: null,
-            lineNumberRight: rightLineNumber,
-            text: rightLines[rightIndex],
-            type: InlineDiffRowType.Insertion
-          });
-          rightIndex++;
-          rightLineNumber++;
-        }
-        continue;
-      }
-    }
-    if (leftIndex < leftLines.length) {
-      rows.push({
-        lineNumberLeft: leftLineNumber,
-        lineNumberRight: null,
-        text: leftLines[leftIndex],
-        type: InlineDiffRowType.Deletion
-      });
-      leftIndex++;
-      leftLineNumber++;
-    }
-    if (rightIndex < rightLines.length) {
-      rows.push({
-        lineNumberLeft: null,
-        lineNumberRight: rightLineNumber,
-        text: rightLines[rightIndex],
-        type: InlineDiffRowType.Insertion
-      });
-      rightIndex++;
-      rightLineNumber++;
-    }
-  }
-  return rows;
-};
-
-const getDisplayedContent = (content, errorMessage, errorCodeFrame, errorStack) => {
-  if (!errorMessage) {
-    return content;
-  }
-  return [errorMessage, errorCodeFrame, errorStack].filter(Boolean).join('\n\n');
-};
-const getTotalLineCount = (diffMode, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack, renderModeLeft, renderModeRight) => {
-  if (diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage) {
-    return getInlineDiffRows(contentLeft, contentRight).length;
-  }
-  return Math.max(renderModeLeft === 'image' ? 1 : getLineCount(getDisplayedContent(contentLeft, errorLeftMessage, errorLeftCodeFrame, errorLeftStack)), renderModeRight === 'image' ? 1 : getLineCount(getDisplayedContent(contentRight, errorRightMessage, errorRightCodeFrame, errorRightStack)));
-};
-
-const loadImageSrc = async uri => {
-  const protocol = getProtocol(uri);
-  const fileUri = protocol === 'file' ? toFileUri(uri) : uri;
-  const blob = await readFileAsBlob(fileUri);
-  return globalThis.URL.createObjectURL(blob);
-};
-
-let cachedAssetDir = '';
-let cachedPlatform = -1;
-let cachedLanguages = [];
-const getLanguages = async (platform, assetDir) => {
-  if (cachedPlatform === platform && cachedAssetDir === assetDir) {
-    return cachedLanguages;
-  }
-  try {
-    const languages = await invoke$2('Extensions.getLanguages', platform, assetDir);
-    if (!Array.isArray(languages)) {
-      return [];
-    }
-    cachedPlatform = platform;
-    cachedAssetDir = assetDir;
-    cachedLanguages = languages;
-    return cachedLanguages;
+    const preparedError = await invoke$6('Errors.prepare', error);
+    return normalizePreparedError(error, preparedError);
   } catch {
-    return [];
+    return normalizePreparedError(error, undefined);
   }
 };
 
-const getFileName = uri => {
-  const protocol = getProtocol(uri);
-  const path = getPath(protocol, uri).split(/[?#]/, 1)[0];
-  const lastSlashIndex = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'));
-  if (lastSlashIndex === -1) {
+const windowsDriveLetterRegex = /^[a-zA-Z]:\\/;
+const encodeFilePath = path => {
+  return encodeURI(path).replaceAll('#', '%23').replaceAll('?', '%3F');
+};
+const toFileUri = path => {
+  if (path.startsWith('file://')) {
     return path;
   }
-  return path.slice(lastSlashIndex + 1);
-};
-const getExtensionIndexes = fileName => {
-  const lastIndex = fileName.lastIndexOf('.');
-  if (lastIndex === -1) {
-    return [-1, -1];
+  if (windowsDriveLetterRegex.test(path)) {
+    const normalizedPath = path.replaceAll('\\', '/');
+    return `file:///${encodeFilePath(normalizedPath)}`;
   }
-  return [lastIndex, fileName.lastIndexOf('.', lastIndex - 1)];
+  return `file://${encodeFilePath(path)}`;
 };
-const hasMatchingExtension = (language, extension) => {
-  if (!extension || !language.extensions) {
-    return false;
+
+const readFile = async uri => {
+  if (!uri || uri.startsWith('untitled://')) {
+    return '';
   }
-  const extensionLower = extension.toLowerCase();
-  return language.extensions.some(value => value.toLowerCase() === extensionLower);
-};
-const hasMatchingFileName = (language, fileName) => {
-  if (!fileName || !language.fileNames) {
-    return false;
+  const protocol = getProtocol(uri);
+  if (protocol === 'data') {
+    return uri.slice('data://'.length);
   }
-  const fileNameLower = fileName.toLowerCase();
-  return language.fileNames.some(value => value.toLowerCase() === fileNameLower);
-};
-const getSyntaxLanguage = (uri, languages) => {
-  const fileName = getFileName(uri);
-  if (!fileName) {
-    return {
-      languageId: 'unknown',
-      tokenizerPath: ''
-    };
+  if (protocol === 'file') {
+    return readFile$2(toFileUri(uri));
   }
-  const [lastExtensionIndex, secondExtensionIndex] = getExtensionIndexes(fileName);
-  const extension = lastExtensionIndex === -1 ? '' : fileName.slice(lastExtensionIndex);
-  const secondExtension = secondExtensionIndex === -1 ? '' : fileName.slice(secondExtensionIndex);
-  for (const language of languages) {
-    if (hasMatchingExtension(language, extension) || hasMatchingExtension(language, secondExtension) || hasMatchingFileName(language, fileName)) {
-      return {
-        languageId: language.id,
-        tokenizerPath: language.tokenize || ''
-      };
-    }
+  if (protocol === 'fetch') {
+    return readFile$1(uri);
   }
-  return {
-    languageId: 'unknown',
-    tokenizerPath: ''
-  };
+  const path = getPath(protocol, uri);
+  if (protocol === 'memfs') {
+    return invoke$5('FileSystemMemory.readFile', path);
+  }
+  return invoke$5('ExtensionHostFileSystem.readFile', protocol, path);
 };
 
-const getUniqueLanguages = (languageLeft, languageRight) => {
-  return [...new Map([languageLeft, languageRight].map(language => [`${language.languageId}:${language.tokenizerPath}`, language])).values()];
+const loadFileContent = async uri => {
+  try {
+    const content = await readFile(uri);
+    return {
+      content,
+      errorCodeFrame: '',
+      errorMessage: '',
+      errorStack: ''
+    };
+  } catch (error) {
+    const prettyError = await prepareError(error);
+    return {
+      content: '',
+      errorCodeFrame: prettyError.codeFrame,
+      errorMessage: prettyError.message,
+      errorStack: prettyError.stack
+    };
+  }
 };
 
-const canTokenize = language => {
-  return language.languageId !== 'unknown' && !!language.tokenizerPath;
+const loadFileContents = async (uriLeft, uriRight) => {
+  const [leftResult, rightResult] = await Promise.all([loadFileContent(uriLeft), loadFileContent(uriRight)]);
+  return {
+    contentLeft: leftResult.content,
+    contentRight: rightResult.content,
+    errorLeftCodeFrame: leftResult.errorCodeFrame,
+    errorLeftMessage: leftResult.errorMessage,
+    errorLeftStack: leftResult.errorStack,
+    errorRightCodeFrame: rightResult.errorCodeFrame,
+    errorRightMessage: rightResult.errorMessage,
+    errorRightStack: rightResult.errorStack
+  };
 };
 
-const loadTokenizer = async language => {
-  if (!canTokenize(language)) {
-    return;
+const getFileExtension = uri => {
+  const protocol = getProtocol(uri);
+  const path = getPath(protocol, uri);
+  const cleanPath = path.split('?', 1)[0].split('#', 1)[0];
+  const extensionIndex = cleanPath.lastIndexOf('.');
+  if (extensionIndex === -1) {
+    return '';
   }
-  await loadTokenizer$1(language.languageId, language.tokenizerPath);
+  return cleanPath.slice(extensionIndex).toLowerCase();
 };
 
-const tokenizeCodeBlock = async (content, language) => {
-  if (!canTokenize(language)) {
-    return [];
-  }
-  try {
-    const result = await invoke('Tokenizer.tokenizeCodeBlock', content, language.languageId, language.tokenizerPath);
-    if (!Array.isArray(result)) {
-      return [];
-    }
-    return result;
-  } catch {
-    return [];
+const getRenderMode = (uri, knownImageExtensions) => {
+  const extension = getFileExtension(uri);
+  if (knownImageExtensions.includes(extension)) {
+    return 'image';
   }
+  return 'text';
 };
 
-const emptySyntaxHighlightingState = {
-  languageIdLeft: 'unknown',
-  languageIdRight: 'unknown',
-  tokenizedLinesLeft: [],
-  tokenizedLinesRight: []
-};
-const loadSyntaxHighlighting = async (contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) => {
+const readImageContent = async (uri, protocol) => {
+  const readUri = protocol === 'file' ? getPath(protocol, uri) : uri;
   try {
-    const languages = await getLanguages(platform, assetDir);
-    const languageLeft = getSyntaxLanguage(uriLeft, languages);
-    const languageRight = getSyntaxLanguage(uriRight, languages);
-    const uniqueLanguages = getUniqueLanguages(languageLeft, languageRight);
-    await Promise.all(uniqueLanguages.map(loadTokenizer));
-    const [tokenizedLinesLeft, tokenizedLinesRight] = await Promise.all([tokenizeCodeBlock(contentLeft, languageLeft), tokenizeCodeBlock(contentRight, languageRight)]);
-    return {
-      languageIdLeft: languageLeft.languageId,
-      languageIdRight: languageRight.languageId,
-      tokenizedLinesLeft,
-      tokenizedLinesRight
-    };
+    return await invoke$3('FileSystem.readFileAsBuffer', readUri);
   } catch {
-    return emptySyntaxHighlightingState;
+    const fileUri = protocol === 'file' ? toFileUri(uri) : uri;
+    return readFile$2(fileUri);
   }
 };
+const loadImageSrc = async uri => {
+  const protocol = getProtocol(uri);
+  const content = await readImageContent(uri, protocol);
+  const blob = new globalThis.Blob([content]);
+  return globalThis.URL.createObjectURL(blob);
+};
 
 const loadImages = async (renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight) => {
   return Promise.all([renderModeLeft === 'image' && !errorLeftMessage ? loadImageSrc(uriLeft) : Promise.resolve(''), renderModeRight === 'image' && !errorRightMessage ? loadImageSrc(uriRight) : Promise.resolve('')]);
@@ -2519,6 +3703,7 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
   const canHighlightRight = renderModeRight === 'text' && !errorRightMessage;
   const syntaxHighlightingState = canHighlightLeft || canHighlightRight ? await loadSyntaxHighlighting(contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) : undefined;
   const [imageSrcLeft, imageSrcRight] = await loadImages(renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight);
+  const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount);
   const nextState = {
     ...state,
     contentLeft,
@@ -2538,6 +3723,7 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
     languageIdRight: syntaxHighlightingState?.languageIdRight || 'unknown',
     renderModeLeft,
     renderModeRight,
+    scrollBarBackgroundImage,
     tokenizedLinesLeft: syntaxHighlightingState?.tokenizedLinesLeft || [],
     tokenizedLinesRight: syntaxHighlightingState?.tokenizedLinesRight || [],
     totalLineCount,
@@ -2559,11 +3745,217 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
     totalLineCountLeft: nextState.totalLineCountLeft,
     totalLineCountRight: nextState.totalLineCountRight
   });
-  return {
-    ...nextState,
-    visibleLinesLeft,
-    visibleLinesRight
-  };
+  return {
+    ...nextState,
+    visibleLinesLeft,
+    visibleLinesRight
+  };
+};
+
+const hasFileChanged = (state, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack) => {
+  return state.contentLeft !== contentLeft || state.contentRight !== contentRight || state.errorLeftMessage !== errorLeftMessage || state.errorLeftCodeFrame !== errorLeftCodeFrame || state.errorLeftStack !== errorLeftStack || state.errorRightMessage !== errorRightMessage || state.errorRightCodeFrame !== errorRightCodeFrame || state.errorRightStack !== errorRightStack;
+};
+const handleWorkspaceChange = async state => {
+  const {
+    contentLeft,
+    contentRight,
+    errorLeftCodeFrame,
+    errorLeftMessage,
+    errorLeftStack,
+    errorRightCodeFrame,
+    errorRightMessage,
+    errorRightStack
+  } = await loadFileContents(state.uriLeft, state.uriRight);
+  if (!hasFileChanged(state, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack)) {
+    return state;
+  }
+  return reloadContent(state, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack);
+};
+
+const hideSearch = state => {
+  return {
+    ...state,
+    searchVisible: false
+  };
+};
+
+const sendMessagePortToExtensionHostWorker = async port => {
+  await sendMessagePortToExtensionHostWorker$1(port, 0);
+};
+
+const createExtensionHostRpc = async () => {
+  try {
+    const rpc = await create$4({
+      commandMap: {},
+      send: sendMessagePortToExtensionHostWorker
+    });
+    set$6(rpc);
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
+  }
+};
+
+const sendMessagePortToTextMeasurementWorker = async port => {
+  await sendMessagePortToTextMeasurementWorker$1(port);
+};
+
+const createTextMeasurementWorkerRpc = async () => {
+  try {
+    const rpc = await create$4({
+      commandMap: {},
+      send: sendMessagePortToTextMeasurementWorker
+    });
+    set$3(rpc);
+  } catch (error) {
+    throw new VError(error, `Failed to create text measurement rpc`);
+  }
+};
+
+const initializeDiffWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToDiffWorker(port, 0);
+    }
+  });
+  set$8(rpc);
+};
+
+const initializeErrorWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToErrorWorker(port, 0);
+    }
+  });
+  set$7(rpc);
+};
+
+const createExtensionManagementWorkerRpc = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send: port => sendMessagePortToExtensionManagementWorker(port, 0)
+  });
+  return rpc;
+};
+
+const initializeExtensionManagementWorker = async () => {
+  const rpc = await createExtensionManagementWorkerRpc();
+  set$5(rpc);
+};
+
+const initializeFileSystemWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToFileSystemWorker(port, 0);
+    }
+  });
+  set$4(rpc);
+};
+
+const initializeSyntaxHighlightingWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToSyntaxHighlightingWorker(port);
+    }
+  });
+  set$1(rpc);
+};
+
+const initializeTextMeasurementWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToTextMeasurementWorker$1(port);
+    }
+  });
+  set$3(rpc);
+};
+
+const measureCharWidth = async state => {
+  const sample = 'MMMMMMMMMM';
+  try {
+    const result = await invoke$2('measureText', {
+      fontFamily: state.fontFamily,
+      fontSize: state.fontSize,
+      letterSpacing: state.letterSpacing,
+      text: sample
+    });
+    if (typeof result === 'number' && result > 0) {
+      return result / sample.length;
+    }
+  } catch {
+    return undefined;
+  }
+  return undefined;
+};
+const initialize = async () => {
+  await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeDiffWorker(), initializeExtensionManagementWorker(), initializeFileSystemWorker(), initializeErrorWorker(), initializeSyntaxHighlightingWorker(), initializeTextMeasurementWorker()]);
+  if (TextMeasurementWorker && typeof invoke$2 === 'function') {
+    const ids = getKeys$1();
+    for (const id of ids) {
+      const stateTuple = get(id);
+      if (!stateTuple) {
+        continue;
+      }
+      const charWidth = await measureCharWidth(stateTuple.newState);
+      if (charWidth) {
+        set(id, stateTuple.oldState, {
+          ...stateTuple.newState,
+          charWidth
+        });
+      }
+    }
+  }
+};
+
+const insertLineBreak = state => {
+  return applyEditInput(state, `${state.inputValue}\n`);
+};
+
+const jumpToNextChange = state => {
+  return state;
+};
+
+const jumpToPreviousChange = state => {
+  return state;
+};
+
+const inlineDiffPrefix = 'inline-diff://';
+const diffPrefix = 'diff://';
+const diffSeparator = '<->';
+const parseDiffUris = contentPart => {
+  const separatorIndex = contentPart.indexOf(diffSeparator);
+  if (separatorIndex === -1) {
+    return ['', contentPart];
+  }
+  const uriLeft = contentPart.slice(0, separatorIndex);
+  const uriRight = contentPart.slice(separatorIndex + diffSeparator.length);
+  return [uriLeft, uriRight];
+};
+const getInlineDiffUris = uri => {
+  if (uri.startsWith(inlineDiffPrefix)) {
+    return parseDiffUris(uri.slice(inlineDiffPrefix.length));
+  }
+  if (uri.startsWith(diffPrefix)) {
+    return parseDiffUris(uri.slice(diffPrefix.length));
+  }
+  return ['', uri];
+};
+
+const getMinLineY = savedState => {
+  if (!savedState || typeof savedState !== 'object') {
+    return 0;
+  }
+  const {
+    minLineY
+  } = savedState;
+  if (typeof minLineY === 'number') {
+    return minLineY;
+  }
+  return 0;
 };
 
 const loadContent = async (state, savedState) => {
@@ -2590,109 +3982,96 @@ const loadContent = async (state, savedState) => {
   }, contentLeft, contentRight, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, errorRightMessage, errorRightCodeFrame, errorRightStack);
 };
 
-const getCss = () => {
-  return `
-.DiffEditorErrorCodeFrame,
-.DiffEditorErrorStack {
-  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-left: 3px solid rgba(248, 81, 73, 0.6);
-  border-radius: 6px;
-  box-sizing: border-box;
-  color: rgba(255, 255, 255, 0.86);
-  font-family: monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  max-width: 100%;
-  min-width: 0;
-  overflow: auto;
-  padding: 8px 10px;
-  user-select: text;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.DiffEditorErrorStackLink {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  white-space: nowrap;
-}
-
-  `;
+const getLines = content => {
+  if (!content) {
+    return [''];
+  }
+  return content.split('\n');
 };
-
-const AddedColor = 'rgba(46, 160, 67, 0.72)';
-const DeletedColor = 'rgba(248, 81, 73, 0.72)';
-const formatPercentage = value => {
-  return String(Number(value.toFixed(4)));
+const clamp = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
 };
-const getScrollBarMarkerType = changeType => {
-  if (changeType === Insertion) {
-    return 'added';
+const setCursor = (state, cursorColumnIndex, cursorRowIndex) => {
+  const lines = getLines(state.contentRight);
+  const nextCursorRowIndex = clamp(cursorRowIndex, 0, lines.length - 1);
+  const nextCursorColumnIndex = clamp(cursorColumnIndex, 0, lines[nextCursorRowIndex].length);
+  if (state.rightEditor.cursorColumnIndex === nextCursorColumnIndex && state.rightEditor.cursorRowIndex === nextCursorRowIndex) {
+    return state;
   }
-  if (changeType === Deletion) {
-    return 'deleted';
+  return {
+    ...state,
+    rightEditor: {
+      ...state.rightEditor,
+      cursorColumnIndex: nextCursorColumnIndex,
+      cursorRowIndex: nextCursorRowIndex
+    }
+  };
+};
+const moveCursorLeft = state => {
+  const {
+    cursorColumnIndex,
+    cursorRowIndex
+  } = state.rightEditor;
+  if (cursorColumnIndex > 0) {
+    return setCursor(state, cursorColumnIndex - 1, cursorRowIndex);
   }
-  return '';
+  if (cursorRowIndex <= 0) {
+    return state;
+  }
+  const lines = getLines(state.contentRight);
+  const previousRowIndex = cursorRowIndex - 1;
+  return setCursor(state, lines[previousRowIndex].length, previousRowIndex);
 };
-const getScrollBarMarkerColor = type => {
-  if (type === 'added') {
-    return AddedColor;
+const moveCursorRight = state => {
+  const lines = getLines(state.contentRight);
+  const cursorRowIndex = clamp(state.rightEditor.cursorRowIndex, 0, lines.length - 1);
+  const cursorColumnIndex = clamp(state.rightEditor.cursorColumnIndex, 0, lines[cursorRowIndex].length);
+  if (cursorColumnIndex < lines[cursorRowIndex].length) {
+    return setCursor(state, cursorColumnIndex + 1, cursorRowIndex);
   }
-  return DeletedColor;
+  if (cursorRowIndex >= lines.length - 1) {
+    return state;
+  }
+  return setCursor(state, 0, cursorRowIndex + 1);
 };
-const getScrollBarMarkersForSide = (rows, side, totalLineCount) => {
-  const markers = [];
-  let start = 0;
-  let activeType = '';
-  for (let index = 0; index < rows.length; index++) {
-    const row = rows[index];
-    const change = side === 'left' ? row.leftChange : row.rightChange;
-    const nextType = getScrollBarMarkerType(change?.type);
-    if (nextType === activeType) {
+const moveCursorUp = state => {
+  return setCursor(state, state.rightEditor.cursorColumnIndex, state.rightEditor.cursorRowIndex - 1);
+};
+const moveCursorDown = state => {
+  return setCursor(state, state.rightEditor.cursorColumnIndex, state.rightEditor.cursorRowIndex + 1);
+};
+const moveCursorToStartOfLine = state => {
+  return setCursor(state, 0, state.rightEditor.cursorRowIndex);
+};
+const moveCursorToEndOfLine = state => {
+  const lines = getLines(state.contentRight);
+  const cursorRowIndex = clamp(state.rightEditor.cursorRowIndex, 0, lines.length - 1);
+  return setCursor(state, lines[cursorRowIndex].length, cursorRowIndex);
+};
+
+const ScrollBarWidth = 44;
+const getEmptyLineNumberHeights = (visibleLines, itemHeight) => {
+  const heights = [];
+  let emptyLineCount = 0;
+  for (const line of visibleLines) {
+    if (line.lineNumber === -1) {
+      emptyLineCount++;
       continue;
     }
-    if (activeType) {
-      markers.push({
-        color: getScrollBarMarkerColor(activeType),
-        end: index / totalLineCount * 100,
-        start: start / totalLineCount * 100
-      });
+    if (emptyLineCount > 0) {
+      heights.push(emptyLineCount * itemHeight);
+      emptyLineCount = 0;
     }
-    activeType = nextType;
-    start = index;
   }
-  if (activeType) {
-    markers.push({
-      color: getScrollBarMarkerColor(activeType),
-      end: rows.length / totalLineCount * 100,
-      start: start / totalLineCount * 100
-    });
+  if (emptyLineCount > 0) {
+    heights.push(emptyLineCount * itemHeight);
   }
-  return markers;
-};
-const getScrollBarMarkerBackgroundImage = ({
-  color,
-  end,
-  start
-}) => {
-  const formattedStart = formatPercentage(start);
-  const formattedEnd = formatPercentage(end);
-  return `linear-gradient(to bottom, transparent ${formattedStart}%, ${color} ${formattedStart}%, ${color} ${formattedEnd}%, transparent ${formattedEnd}%)`;
+  return heights;
 };
-const getScrollBarBackgroundImage = (inlineChanges, totalLineCount) => {
-  if (inlineChanges.length === 0 || totalLineCount === 0) {
-    return 'none';
-  }
-  const rows = getVisibleInlineDiffRows(inlineChanges);
-  const markers = [...getScrollBarMarkersForSide(rows, 'left', totalLineCount), ...getScrollBarMarkersForSide(rows, 'right', totalLineCount)];
-  if (markers.length === 0) {
-    return 'none';
-  }
-  return markers.map(getScrollBarMarkerBackgroundImage).join(', ');
+const getEmptyLineNumberCss = (visibleLinesLeft, visibleLinesRight, itemHeight) => {
+  const heights = new Set([...getEmptyLineNumberHeights(visibleLinesLeft, itemHeight), ...getEmptyLineNumberHeights(visibleLinesRight, itemHeight)]);
+  return [...heights].toSorted((a, b) => a - b).map(height => `.Height-${height} {\n  height: ${height}px;\n}`).join('\n\n');
 };
-
 const renderCss = (oldState, newState) => {
   const {
     deltaY,
@@ -2700,42 +4079,138 @@ const renderCss = (oldState, newState) => {
     gutterWidthVariable,
     height,
     id,
-    inlineChanges,
     itemHeight,
     leftWidth,
+    lineNumbers,
+    minLineY,
+    renderModeLeft,
+    renderModeRight,
+    rightEditor,
     rightWidth,
-    scrollBarHeight,
-    totalLineCount
+    scrollBarBackgroundImage,
+    scrollBarHeight
   } = newState;
   const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY);
-  const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount);
   const {
     layout
   } = newState;
-  const staticCss = getCss();
   const gutterWidth = 'var(--GutterWidth)';
-  const gutterPaddingWidth = 20;
+  const gutterPaddingWidth = GutterPaddingWidth;
   const inlineGutterExtraWidth = 9 + gutterPaddingWidth;
+  const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text';
+  const rightCursorGutterWidth = showLineNumbers ? gutterWidthVariable + GutterPaddingWidth : 0;
+  const rightCursorLeft = rightCursorGutterWidth + RowPaddingLeft + rightEditor.cursorColumnIndex * getCharWidth(newState);
+  const rightCursorTop = (rightEditor.cursorRowIndex - minLineY) * LineHeight;
   const css = `
 :root {
+  --DiffBackground: #0b0d10;
+  --DiffForeground: rgba(255, 255, 255, 0.88);
+  --DiffGutterBackground: #0f1218;
+  --DiffGutterForeground: rgba(255, 255, 255, 0.58);
+  --DiffSeparatorColor: rgba(255, 255, 255, 0.12);
+  --DiffMissingLineBackground: rgba(255, 255, 255, 0.035);
+  --DiffDeletionBackground: rgba(248, 81, 73, 0.2);
+  --DiffDeletionForeground: #ffb3ad;
+  --DiffDeletionAccent: #ff5f6d;
+  --DiffInsertionBackground: rgba(46, 160, 67, 0.22);
+  --DiffInsertionForeground: #b7f7c0;
+  --DiffInsertionAccent: #3fb950;
   --ItemHeight: ${itemHeight}px;
   --LeftWidth: ${leftWidth}px;
   --RightWidth: ${rightWidth}px;
   --GutterWidth: ${gutterWidthVariable}px;
-  --DiffEditorHeight: ${height}px;
   --EditorRowHeight: ${itemHeight}px;
   --ScrollBarHeight: ${scrollBarHeight}px;
   --ScrollBarBackgroundImage: ${scrollBarBackgroundImage};
   --ScrollBarThumbTop: ${scrollBarThumbTop}px;
+  --ScrollBarWidth: ${ScrollBarWidth}px;
+  --DiffFontFamily: ${newState.fontFamily};
 }
 
+
 .DiffEditor {
+  background: var(--DiffBackground);
+  color: var(--DiffForeground);
   display: flex;
-  height: var(--DiffEditorHeight);
   position: relative;
   width: 100%;
 }
 
+.DiffEditorWithSearch {
+  flex-direction: column;
+}
+
+.DiffEditorBody {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.DiffSearchHeader {
+  align-items: center;
+  background: var(--DiffGutterBackground);
+  border-bottom: 1px solid var(--DiffSeparatorColor);
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  height: 40px;
+  padding: 6px 12px;
+}
+
+.DiffSearchInput {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--DiffForeground);
+  font: 13px system-ui, sans-serif;
+  height: 28px;
+  max-width: 320px;
+  min-width: 120px;
+  outline: none;
+  padding: 0 8px;
+  width: 100%;
+}
+
+.DiffSearchInput:focus {
+  border-color: rgba(116, 178, 255, 0.72);
+}
+
+.DiffEditorButtons {
+  align-items: center;
+  display: inline-flex;
+  gap: 8px;
+  position: absolute;
+  right: 14px;
+  top: 8px;
+  z-index: 2;
+}
+
+.DiffEditorModeToggle,
+.DiffEditorWhitespaceToggle {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 4px;
+  color: var(--DiffForeground);
+  cursor: pointer;
+  display: inline-flex;
+  font: 12px system-ui, sans-serif;
+  height: 28px;
+  padding: 0 10px;
+}
+
+.DiffEditorModeToggle:hover,
+.DiffEditorWhitespaceToggle:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.DiffEditorWhitespaceToggleActive {
+  background: rgba(74, 144, 226, 0.24);
+  border-color: rgba(116, 178, 255, 0.58);
+}
+
 .DiffEditorHorizontal {
   flex-direction: row;
 }
@@ -2744,6 +4219,19 @@ const renderCss = (oldState, newState) => {
   flex-direction: column;
 }
 
+.DiffEditorWithSearch.DiffEditorHorizontal,
+.DiffEditorWithSearch.DiffEditorVertical {
+  flex-direction: column;
+}
+
+.DiffEditorBody.DiffEditorVertical {
+  flex-direction: column;
+}
+
+.DiffEditorBody.DiffEditorHorizontal {
+  flex-direction: row;
+}
+
 .InlineDiffEditor {
   flex-direction: column;
 }
@@ -2753,29 +4241,38 @@ const renderCss = (oldState, newState) => {
   height: 100%;
   overflow: hidden;
   user-select: text;
+  flex-direction: row;
 }
 
 .InlineDiffEditorContent {
   display: flex;
+  flex-direction: row;
   height: 100%;
   overflow: hidden;
 }
 
 .DiffEditorContentLeft,
 .DiffEditorContentRight {
+  align-items: stretch;
   display: flex;
+  flex: none !important;
+  min-height: 0;
+  min-width: 0;
   overflow: hidden;
+  position: relative;
 }
 
 .DiffEditorGutter {
+  background: var(--DiffGutterBackground);
+  border-right: 1px solid var(--DiffSeparatorColor);
   box-sizing: border-box;
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--DiffGutterForeground);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  font-family: monospace;
+  font-family: var(--DiffFontFamily, monospace);
+  font-variant-numeric: tabular-nums;
   overflow: hidden;
-  padding: 0 8px 0 12px;
   text-align: right;
   user-select: none;
   width: calc(${gutterWidth} + ${gutterPaddingWidth}px);
@@ -2786,22 +4283,51 @@ const renderCss = (oldState, newState) => {
 }
 
 .DiffEditorLineNumber {
+  border-left: 2px solid transparent;
   box-sizing: border-box;
   height: var(--ItemHeight);
   line-height: var(--ItemHeight);
+  padding: 0 10px 0 6px;
   white-space: pre;
+  flex-shrink: 0;
+}
+
+.DiffEditor .DiffEditorLineNumber {
+  color: var(--DiffGutterForeground);
+}
+
+.DiffEditor .DiffEditorLineNumberDeletion {
+  background: var(--DiffDeletionBackground);
+  border-left-color: var(--DiffDeletionAccent);
+  color: var(--DiffDeletionAccent);
+}
+
+.DiffEditor .DiffEditorLineNumberInsertion {
+  background: var(--DiffInsertionBackground);
+  border-left-color: var(--DiffInsertionAccent);
+  color: var(--DiffInsertionAccent);
+}
+
+.DiffEditor .DiffEditorLineNumberMeta {
+  color: rgba(255, 255, 255, 0.4);
 }
 
 .DiffEditorLineNumberEmpty {
+  background-color: var(--DiffMissingLineBackground);
+  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
   box-sizing: border-box;
   flex-shrink: 0;
 }
 
+${getEmptyLineNumberCss(newState.visibleLinesLeft, newState.visibleLinesRight, itemHeight)}
+
 .DiffEditorRows {
-  contain: strict;
+  background: var(--DiffBackground);
+  contain: layout paint style;
   cursor: text;
-  flex: 1;
-  font-family: monospace;
+  flex: 1 1 auto;
+  font-family: var(--DiffFontFamily, monospace);
+  height: 100%;
   min-width: 0;
   overflow: hidden;
 }
@@ -2810,17 +4336,86 @@ const renderCss = (oldState, newState) => {
   box-sizing: border-box;
   height: var(--ItemHeight);
   line-height: var(--ItemHeight);
+  padding: 0 12px;
   white-space: pre;
 }
 
+.DiffEditorSelections {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+}
+
+.EditorCursor {
+  background: red;
+  height: var(--ItemHeight);
+  left: var(--CursorLeft);
+  position: absolute;
+  top: var(--CursorTop);
+  width: 2px;
+}
+
+.EditorCursorRight {
+  --CursorLeft: ${rightCursorLeft}px;
+  --CursorTop: ${rightCursorTop}px;
+}
+
+.DiffEditorInputWrapper {
+  contain: strict;
+  height: 0;
+  position: absolute;
+  width: 0;
+  z-index: 1;
+}
+
+.DiffEditorInput {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  cursor: text;
+  height: 0;
+  outline: none;
+  padding: 0;
+  position: absolute;
+  width: 0;
+}
+
 .DiffEditor .Deletion {
-  background: rgba(255, 0, 0, 0.16);
-  color: #ffb3b3;
+  background: var(--DiffDeletionBackground);
+  box-shadow: inset 3px 0 var(--DiffDeletionAccent);
+  color: var(--DiffDeletionForeground);
 }
 
 .DiffEditor .Insertion {
-  background: rgba(0, 128, 0, 0.18);
-  color: #b7f7c0;
+  background: var(--DiffInsertionBackground);
+  box-shadow: inset 3px 0 var(--DiffInsertionAccent);
+  color: var(--DiffInsertionForeground);
+}
+
+.DiffEditor .GitButtons {
+  background: rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 12px;
+}
+
+.DiffEditor .IncomingChange {
+  background: rgba(46, 160, 67, 0.16);
+  box-shadow: inset 3px 0 var(--DiffInsertionAccent);
+  color: rgba(183, 247, 192, 0.95);
+  font-size: 12px;
+}
+
+.DiffToken--changed {
+  background: rgba(245, 158, 11, 0.22);
+  border-radius: 4px;
+}
+
+.DiffEditorLineMissing {
+  background-color: var(--DiffMissingLineBackground);
+  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
+  box-shadow: none;
 }
 
 .ImageContent {
@@ -2896,7 +4491,7 @@ const renderCss = (oldState, newState) => {
   position: absolute;
   right: 2px;
   top: 0;
-  width: 8px;
+  width: var(--ScrollBarWidth);
 }
 
 .DiffScrollBarThumb {
@@ -2909,347 +4504,66 @@ const renderCss = (oldState, newState) => {
   width: 100%;
 }
 
-${staticCss}
-`;
-  return [SetCss, id, css];
-};
-
-const renderFocusContext = (oldState, newState) => {
-  const {
-    focus,
-    id
-  } = newState;
-  return [SetFocusContext, id, focus];
-};
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const text = data => {
-  return {
-    childCount: 0,
-    text: data,
-    type: Text
-  };
-};
+:root {
+ --DiffSeparatorBackground: gray;
+ --DiffSeparatorWidth: 6px;
 
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
+}
 
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
-};
+.DiffEditor .Sash {
+  position: relative;
+  width: var(--DiffSeparatorWidth);
+  background: var(--DiffSeparatorBackground);
 
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
-};
+}
 
-const arrayToTree = nodes => {
-  const result = [];
-  let i = 0;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    const {
-      children,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
-    result.push({
-      node,
-      children
-    });
-    i += 1 + nodesConsumed;
-  }
-  return result;
-};
-const getChildrenWithCount = (nodes, startIndex, childCount) => {
-  if (childCount === 0) {
-    return {
-      children: [],
-      nodesConsumed: 0
-    };
-  }
-  const children = [];
-  let i = startIndex;
-  let remaining = childCount;
-  let totalConsumed = 0;
-  while (remaining > 0 && i < nodes.length) {
-    const node = nodes[i];
-    const nodeChildCount = node.childCount || 0;
-    const {
-      children: nodeChildren,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
-    children.push({
-      node,
-      children: nodeChildren
-    });
-    const nodeSize = 1 + nodesConsumed;
-    i += nodeSize;
-    totalConsumed += nodeSize;
-    remaining--;
-  }
-  return {
-    children,
-    nodesConsumed: totalConsumed
-  };
-};
+.DiffEditorErrorCodeFrame,
+.DiffEditorErrorStack {
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 3px solid rgba(248, 81, 73, 0.6);
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.86);
+  font-family: var(--DiffFontFamily, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto;
+  padding: 8px 10px;
+  user-select: text;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 
-const compareNodes = (oldNode, newNode) => {
-  const patches = [];
-  // Check if node type changed - return null to signal incompatible nodes
-  // (caller should handle this with a Replace operation)
-  if (oldNode.type !== newNode.type) {
-    return null;
-  }
-  // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference) {
-    if (oldNode.uid !== newNode.uid) {
-      patches.push({
-        type: SetReferenceNodeUid,
-        uid: newNode.uid
-      });
-    }
-    return patches;
-  }
-  // Handle text nodes
-  if (oldNode.type === Text && newNode.type === Text) {
-    if (oldNode.text !== newNode.text) {
-      patches.push({
-        type: SetText,
-        value: newNode.text
-      });
-    }
-    return patches;
-  }
-  // Compare attributes
-  const oldKeys = getKeys(oldNode);
-  const newKeys = getKeys(newNode);
-  // Check for attribute changes
-  for (const key of newKeys) {
-    if (oldNode[key] !== newNode[key]) {
-      patches.push({
-        type: SetAttribute,
-        key,
-        value: newNode[key]
-      });
-    }
-  }
-  // Check for removed attributes
-  for (const key of oldKeys) {
-    if (!(key in newNode)) {
-      patches.push({
-        type: RemoveAttribute,
-        key
-      });
-    }
-  }
-  return patches;
-};
+.DiffEditorErrorStackLink {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+}
 
-const treeToArray = node => {
-  const result = [node.node];
-  for (const child of node.children) {
-    result.push(...treeToArray(child));
-  }
-  return result;
-};
 
-const diffChildren = (oldChildren, newChildren, patches) => {
-  const maxLength = Math.max(oldChildren.length, newChildren.length);
-  // Track where we are: -1 means at parent, >= 0 means at child index
-  let currentChildIndex = -1;
-  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
-  const indicesToRemove = [];
-  for (let i = 0; i < maxLength; i++) {
-    const oldNode = oldChildren[i];
-    const newNode = newChildren[i];
-    if (!oldNode && !newNode) {
-      continue;
-    }
-    if (!oldNode) {
-      // Add new node - we should be at the parent
-      if (currentChildIndex >= 0) {
-        // Navigate back to parent
-        patches.push({
-          type: NavigateParent
-        });
-        currentChildIndex = -1;
-      }
-      // Flatten the entire subtree so renderInternal can handle it
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Add,
-        nodes: flatNodes
-      });
-    } else if (newNode) {
-      // Compare nodes to see if we need any patches
-      const nodePatches = compareNodes(oldNode.node, newNode.node);
-      // If nodePatches is null, the node types are incompatible - need to replace
-      if (nodePatches === null) {
-        // Navigate to this child
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Replace the entire subtree
-        const flatNodes = treeToArray(newNode);
-        patches.push({
-          type: Replace,
-          nodes: flatNodes
-        });
-        // After replace, we're at the new element (same position)
-        continue;
-      }
-      // Check if we need to recurse into children
-      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-      // Only navigate to this element if we need to do something
-      if (nodePatches.length > 0 || hasChildrenToCompare) {
-        // Navigate to this child if not already there
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Apply node patches (these apply to the current element, not children)
-        if (nodePatches.length > 0) {
-          patches.push(...nodePatches);
-        }
-        // Compare children recursively
-        if (hasChildrenToCompare) {
-          diffChildren(oldNode.children, newNode.children, patches);
-        }
-      }
-    } else {
-      // Remove old node - collect the index for later removal
-      indicesToRemove.push(i);
-    }
-  }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
-    currentChildIndex = -1;
-  }
-  // Add remove patches in reverse order (highest index first)
-  // This ensures indices remain valid as we remove
-  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
-    patches.push({
-      type: RemoveChild,
-      index: indicesToRemove[j]
-    });
-  }
-};
-const diffTrees = (oldTree, newTree, patches, path) => {
-  // At the root level (path.length === 0), we're already AT the element
-  // So we compare the root node directly, then compare its children
-  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
-    const oldNode = oldTree[0];
-    const newNode = newTree[0];
-    // Compare root nodes
-    const nodePatches = compareNodes(oldNode.node, newNode.node);
-    // If nodePatches is null, the root node types are incompatible - need to replace
-    if (nodePatches === null) {
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Replace,
-        nodes: flatNodes
-      });
-      return;
-    }
-    if (nodePatches.length > 0) {
-      patches.push(...nodePatches);
-    }
-    // Compare children
-    if (oldNode.children.length > 0 || newNode.children.length > 0) {
-      diffChildren(oldNode.children, newNode.children, patches);
-    }
-  } else {
-    // Non-root level or multiple root elements - use the regular comparison
-    diffChildren(oldTree, newTree, patches);
-  }
+`;
+  return [SetCss, id, css];
 };
 
-const removeTrailingNavigationPatches = patches => {
-  // Find the last non-navigation patch
-  let lastNonNavigationIndex = -1;
-  for (let i = patches.length - 1; i >= 0; i--) {
-    const patch = patches[i];
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      lastNonNavigationIndex = i;
-      break;
-    }
+const renderFocus = (oldState, newState) => {
+  if (newState.focus !== FocusDiffEditorText) {
+    return [];
   }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+  return [FocusSelector, newState.id, '.DiffEditorInput'];
 };
 
-const diffTree = (oldNodes, newNodes) => {
-  // Step 1: Convert flat arrays to tree structures
-  const oldTree = arrayToTree(oldNodes);
-  const newTree = arrayToTree(newNodes);
-  // Step 3: Compare the trees
-  const patches = [];
-  diffTrees(oldTree, newTree, patches, []);
-  // Remove trailing navigation patches since they serve no purpose
-  return removeTrailingNavigationPatches(patches);
+const renderFocusContext = (oldState, newState) => {
+  const {
+    focus,
+    id
+  } = newState;
+  return [SetFocusContext, id, focus];
 };
 
-const DiffEditor = 'DiffEditor';
-const DiffEditorContent = 'DiffEditorContent';
-const DiffEditorContentLeft = 'DiffEditorContentLeft';
-const DiffEditorContentRight = 'DiffEditorContentRight';
-const DiffEditorErrorCodeFrame = 'DiffEditorErrorCodeFrame';
-const DiffEditorError = 'DiffEditorError';
-const DiffEditorErrorMessage = 'DiffEditorErrorMessage';
-const DiffEditorErrorStack = 'DiffEditorErrorStack';
-const DiffEditorErrorStackLink = 'DiffEditorErrorStackLink';
-const DiffEditorGutter = 'DiffEditorGutter';
-const DiffEditorLineNumber = 'DiffEditorLineNumber';
-const DiffEditorLineNumberEmpty = 'DiffEditorLineNumberEmpty';
-const DiffEditorRows = 'DiffEditorRows';
-const DiffEditorHorizontal = 'DiffEditorHorizontal';
-const DiffEditorVertical = 'DiffEditorVertical';
-const EditorRow = 'EditorRow';
-const EditorRowDeletion = 'EditorRow Deletion';
-const EditorRowInsertion = 'EditorRow Insertion';
-const InlineDiffEditor = 'InlineDiffEditor';
-const InlineDiffEditorContent = 'InlineDiffEditorContent';
-const Sash = 'Sash';
-const SashHorizontal = 'SashHorizontal';
-const SashVertical = 'SashVertical';
-const DiffScrollBar = 'DiffScrollBar';
-const DiffScrollBarThumb = 'DiffScrollBarThumb';
-const Viewlet = 'Viewlet';
-
-const HandleClickAt = 1;
 const HandleContextMenu = 2;
 const HandleFocus = 3;
 const HandleInput = 4;
@@ -3264,24 +4578,40 @@ const HandleSashPointerUp = 13;
 const HandleScrollBarPointerDown = 14;
 const HandleScrollBarPointerMove = 15;
 const HandleScrollBarPointerUp = 16;
-
-const parentNode = {
-  childCount: 1,
-  className: DiffEditorLineNumber,
-  type: Div
-};
-const getLineNumberDom = lineNumber => {
-  return [parentNode, text(lineNumber === -1 ? '' : String(lineNumber))];
-};
+const HandleClickLeftSide = 17;
+const HandleClickRightSide = 18;
+const HandleBeforeInput = 19;
 
 const getEmptyLineNumberDom = (emptyLineCount, itemHeight) => {
+  const height = emptyLineCount * itemHeight;
   return {
     childCount: 0,
-    className: DiffEditorLineNumberEmpty,
-    style: `height: ${emptyLineCount * itemHeight}px;`,
+    className: `${DiffEditorLineNumberEmpty} Height-${height}`,
     type: Div
   };
 };
+
+const getLineNumberClassName = (type = VisibleLineType.Normal) => {
+  if (type === VisibleLineType.Removed || type === InlineDiffRowType.Deletion) {
+    return `${DiffEditorLineNumber} ${DiffEditorLineNumberDeletion}`;
+  }
+  if (type === VisibleLineType.Added || type === InlineDiffRowType.Insertion) {
+    return `${DiffEditorLineNumber} ${DiffEditorLineNumberInsertion}`;
+  }
+  if (type === InlineDiffRowType.GitButtons || type === InlineDiffRowType.IncomingChange) {
+    return `${DiffEditorLineNumber} ${DiffEditorLineNumberMeta}`;
+  }
+  return DiffEditorLineNumber;
+};
+
+const getLineNumberDom = (lineNumber, type = VisibleLineType.Normal) => {
+  return [{
+    childCount: 1,
+    className: getLineNumberClassName(type),
+    type: Div
+  }, text(lineNumber === -1 ? '' : String(lineNumber))];
+};
+
 const getGutterDom = (visibleLines, itemHeight) => {
   const children = [];
   let childCount = 0;
@@ -3296,7 +4626,7 @@ const getGutterDom = (visibleLines, itemHeight) => {
       childCount++;
       emptyLineCount = 0;
     }
-    children.push(...getLineNumberDom(line.lineNumber));
+    children.push(...getLineNumberDom(line.lineNumber, line.type));
     childCount++;
   }
   if (emptyLineCount > 0) {
@@ -3320,24 +4650,16 @@ const getRowsDom = (rowsChildCount, rows) => {
 
 const getContentDomWithLineNumbers = (contentClassName, visibleLines, rowsChildCount, rows, itemHeight = 20) => {
   return [{
-    childCount: 1,
-    className: DiffEditorContent,
-    type: Div
-  }, {
     childCount: 2,
-    className: contentClassName,
+    className: `${DiffEditorContent} ${contentClassName}`,
     type: Div
   }, ...getGutterDom(visibleLines, itemHeight), ...getRowsDom(rowsChildCount, rows)];
 };
 
 const getContentDomWithoutLineNumbers = (contentClassName, rowsChildCount, rows) => {
   return [{
-    childCount: 1,
-    className: DiffEditorContent,
-    type: Div
-  }, {
     childCount: rowsChildCount,
-    className: contentClassName,
+    className: `${DiffEditorContent} ${contentClassName}`,
     type: Div
   }, ...rows];
 };
@@ -3359,10 +4681,14 @@ const getErrorCodeFrameDom = codeFrame => {
 
 const getStackLineHref = (location, allowedLinkSchemes) => {
   const scheme = location.startsWith('/') ? 'file' : location.slice(0, location.indexOf(':'));
-  if (allowedLinkSchemes.includes(scheme)) {
-    return scheme === 'file' ? `file://${location.startsWith('file://') ? location.slice('file://'.length) : location}` : location;
+  if (!allowedLinkSchemes.includes(scheme)) {
+    return '#';
+  }
+  if (scheme !== 'file') {
+    return location;
   }
-  return '#';
+  const filePath = location.startsWith('file://') ? location.slice('file://'.length) : location;
+  return `file://${filePath}`;
 };
 
 const getStackLineLabel = location => {
@@ -3374,23 +4700,94 @@ const getStackLineLabel = location => {
   return `(${fileName})`;
 };
 
-const stackLocationRegex = /((?:[a-zA-Z][a-zA-Z0-9+.-]*:\/\/|\/)[^\s)]+):(\d+):(\d+)\)?$/;
+const whitespaceRegex = /\s/;
+const isSchemeCharacter = char => {
+  return char >= 'a' && char <= 'z' || char >= 'A' && char <= 'Z' || char >= '0' && char <= '9' || char === '+' || char === '.' || char === '-';
+};
+const isSchemeStart = char => {
+  return char >= 'a' && char <= 'z' || char >= 'A' && char <= 'Z';
+};
+const isLocationBoundary = (stackLine, index) => {
+  return index === 0 || stackLine[index - 1] === '(' || whitespaceRegex.test(stackLine[index - 1]);
+};
+const getSchemeLocationStart = (stackLine, locationEnd) => {
+  const schemeSeparator = stackLine.lastIndexOf('://', locationEnd);
+  if (schemeSeparator === -1) {
+    return -1;
+  }
+  let start = schemeSeparator - 1;
+  while (start >= 0 && isSchemeCharacter(stackLine[start])) {
+    start--;
+  }
+  start++;
+  if (!isSchemeStart(stackLine[start]) || !isLocationBoundary(stackLine, start)) {
+    return -1;
+  }
+  return start;
+};
+const getFileLocationStart = (stackLine, locationEnd) => {
+  for (let index = locationEnd - 1; index >= 0; index--) {
+    if (stackLine[index] === '/' && isLocationBoundary(stackLine, index)) {
+      return index;
+    }
+  }
+  return -1;
+};
+const getLocationStart = (stackLine, locationEnd) => {
+  const schemeStart = getSchemeLocationStart(stackLine, locationEnd);
+  if (schemeStart !== -1) {
+    return schemeStart;
+  }
+  return getFileLocationStart(stackLine, locationEnd);
+};
+const isDigits = text => {
+  for (const char of text) {
+    if (char < '0' || char > '9') {
+      return false;
+    }
+  }
+  return text.length > 0;
+};
+const parseStackLocation = stackLine => {
+  const textEnd = stackLine.endsWith(')') ? stackLine.length - 1 : stackLine.length;
+  const columnSeparator = stackLine.lastIndexOf(':', textEnd - 1);
+  if (columnSeparator === -1) {
+    return undefined;
+  }
+  const lineSeparator = stackLine.lastIndexOf(':', columnSeparator - 1);
+  if (lineSeparator === -1) {
+    return undefined;
+  }
+  const line = stackLine.slice(lineSeparator + 1, columnSeparator);
+  const column = stackLine.slice(columnSeparator + 1, textEnd);
+  if (!isDigits(line) || !isDigits(column)) {
+    return undefined;
+  }
+  const locationStart = getLocationStart(stackLine, lineSeparator);
+  if (locationStart === -1) {
+    return undefined;
+  }
+  return {
+    location: stackLine.slice(locationStart, lineSeparator),
+    text: stackLine.slice(locationStart)
+  };
+};
 
 const getStackLineLocation = stackLine => {
-  const match = stackLine.match(stackLocationRegex);
+  const match = parseStackLocation(stackLine);
   if (!match) {
     return '';
   }
-  const [, location] = match;
-  return location;
+  return match.location;
 };
 
+const trailingOpenParenthesisRegex = /\($/;
 const getStackLinePrefix = stackLine => {
-  const match = stackLine.match(stackLocationRegex);
+  const match = parseStackLocation(stackLine);
   if (!match) {
     return stackLine;
   }
-  return stackLine.slice(0, stackLine.length - match[0].length).replace(/\($/, '');
+  return stackLine.slice(0, stackLine.length - match.text.length).replace(trailingOpenParenthesisRegex, '');
 };
 
 const getErrorStackLineDom = (stackLine, allowedLinkSchemes) => {
@@ -3432,12 +4829,8 @@ const getErrorStackDom = (errorStack, allowedLinkSchemes = defaultAllowedLinkSch
 const getErrorDom = (contentClassName, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes = defaultAllowedLinkSchemes) => {
   const childCount = 1 + Number(Boolean(errorCodeFrame)) + Number(Boolean(errorStack));
   return [{
-    childCount: 1,
-    className: DiffEditorContent,
-    type: Div
-  }, {
     childCount,
-    className: `${contentClassName} ${DiffEditorError}`,
+    className: `${DiffEditorContent} ${contentClassName} ${DiffEditorError}`,
     type: Div
   }, {
     childCount: 1,
@@ -3470,9 +4863,10 @@ const getTokenDom = token => {
 const getLineDom = line => {
   const children = line.tokens.length === 0 ? [text('')] : line.tokens.flatMap(getTokenDom);
   const childCount = line.tokens.length === 0 ? 1 : line.tokens.length;
+  const className = line.lineNumber === -1 ? `${EditorRow} ${DiffEditorLineMissing}` : getRowClassName(line.type);
   return [{
     childCount,
-    className: getRowClassName(line.type),
+    className,
     type: Div
   }, ...children];
 };
@@ -3485,7 +4879,7 @@ const getContentDom = (contentClassName, content, errorMessage, errorCodeFrame,
   if (errorMessage) {
     return getErrorDom(contentClassName, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes);
   }
-  const lines = visibleLines.length > 0 ? visibleLines : getVisibleLines(content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines);
+  const lines = visibleLines.length > 0 ? visibleLines : getVisibleLines(content, '', totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines);
   const rows = getVisibleLinesDom(lines);
   const rowsChildCount = lines.length;
   if (lineNumbers) {
@@ -3494,24 +4888,231 @@ const getContentDom = (contentClassName, content, errorMessage, errorCodeFrame,
   return getContentDomWithoutLineNumbers(contentClassName, rowsChildCount, rows);
 };
 
-const getContentLeftDom = (contentLeft, errorMessage = '', errorCodeFrame = '', errorStack = '', allowedLinkSchemes = defaultAllowedLinkSchemes, lineNumbers = true, totalLineCount = contentLeft ? contentLeft.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = [], itemHeight = 20) => {
-  return getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'left', tokenizedLines, visibleLines, itemHeight);
+const getContentLeftDom = ({
+  allowedLinkSchemes = defaultAllowedLinkSchemes,
+  contentLeft,
+  errorCodeFrame = '',
+  errorMessage = '',
+  errorStack = '',
+  inlineChanges = [],
+  itemHeight = 20,
+  lineNumbers = true,
+  maxLineY,
+  minLineY = 0,
+  tokenizedLines = [],
+  totalLineCount,
+  visibleLines = []
+}) => {
+  const resolvedTotalLineCount = totalLineCount ?? (contentLeft ? contentLeft.split('\n').length : 1);
+  const resolvedMaxLineY = maxLineY ?? resolvedTotalLineCount;
+  const [content, ...rest] = getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, resolvedTotalLineCount, minLineY, resolvedMaxLineY, inlineChanges, 'left', tokenizedLines, visibleLines, itemHeight);
+  return [{
+    ...content,
+    onClick: HandleClickLeftSide
+  }, ...rest];
+};
+
+const getCursorDom = () => {
+  return [{
+    childCount: 1,
+    className: DiffEditorSelections,
+    type: Div
+  }, {
+    childCount: 0,
+    className: `${EditorCursor} ${EditorCursorRight}`,
+    type: Div
+  }];
+};
+
+const DiffEditorInput = 'DiffEditorInput';
+const SourceControlInput = 'SourceControlInput';
+
+const getInputWrapperDom = (inputValue, caretPosition = inputValue.length) => [{
+  childCount: 1,
+  className: DiffEditorInputWrapper,
+  type: Div
+}, {
+  childCount: 0,
+  className: DiffEditorInput$1,
+  name: DiffEditorInput,
+  onInput: HandleInput,
+  selectionEnd: caretPosition,
+  selectionStart: caretPosition,
+  type: TextArea,
+  value: inputValue
+}];
+const getContentRightDom = ({
+  allowedLinkSchemes = defaultAllowedLinkSchemes,
+  contentRight,
+  editable = false,
+  errorCodeFrame = '',
+  errorMessage = '',
+  errorStack = '',
+  inlineChanges = [],
+  inputValue = '',
+  itemHeight = 20,
+  lineNumbers = true,
+  maxLineY,
+  minLineY = 0,
+  tokenizedLines = [],
+  totalLineCount,
+  visibleLines = []
+}) => {
+  const resolvedTotalLineCount = totalLineCount ?? (contentRight ? contentRight.split('\n').length : 1);
+  const resolvedMaxLineY = maxLineY ?? resolvedTotalLineCount;
+  const contentDom = getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, resolvedTotalLineCount, minLineY, resolvedMaxLineY, inlineChanges, 'right', tokenizedLines, visibleLines, itemHeight);
+  if (!editable || errorMessage) {
+    const [content, ...rest] = contentDom;
+    return [{
+      ...content,
+      onClick: HandleClickRightSide
+    }, ...rest];
+  }
+  const [content, ...rest] = contentDom;
+  const cursorDom = getCursorDom();
+  return [{
+    ...content,
+    childCount: content.childCount + 2,
+    onClick: HandleClickRightSide
+  }, ...rest, ...cursorDom, ...getInputWrapperDom(inputValue)];
+};
+
+const getLabel$1 = diffMode => {
+  return diffMode === 'inline' ? sideBySide() : inline();
+};
+const getTitle = diffMode => {
+  const label = getLabel$1(diffMode);
+  return switchToDiff(label);
+};
+const getDiffModeToggleDom = diffMode => {
+  const label = getLabel$1(diffMode);
+  return [{
+    childCount: 1,
+    className: DiffEditorModeToggle,
+    name: ToggleDiffMode,
+    onClick: HandleClickAction,
+    title: getTitle(diffMode),
+    type: Button$1
+  }, text(label)];
+};
+
+/* eslint-disable  sonarjs/no-selector-parameter */
+const getLabel = showWhitespace$1 => {
+  return showWhitespace$1 ? hideWhitespace() : showWhitespace();
+};
+const getWhitespaceToggleDom = showWhitespace => {
+  const label = getLabel(showWhitespace);
+  const className = showWhitespace ? `${DiffEditorWhitespaceToggle} ${DiffEditorWhitespaceToggleActive}` : DiffEditorWhitespaceToggle;
+  return [{
+    childCount: 1,
+    className,
+    name: ToggleWhitespace,
+    onClick: HandleClickAction,
+    title: label,
+    type: Button$1
+  }, text(label)];
+};
+
+const getDiffEditorButtonsDom = (diffMode, showWhitespace) => {
+  return [{
+    childCount: 2,
+    className: DiffEditorButtons,
+    type: Div
+  }, ...getWhitespaceToggleDom(showWhitespace), ...getDiffModeToggleDom(diffMode)];
+};
+
+const countOccurrences = (text, query) => {
+  if (!query) return 0;
+  let count = 0;
+  let index = 0;
+  while (true) {
+    index = text.indexOf(query, index);
+    if (index === -1) break;
+    count += 1;
+    index += query.length;
+  }
+  return count;
+};
+const getDiffSearchHeaderDom = (contentLeft, contentRight, query) => {
+  const q = query || '';
+  const leftCount = countOccurrences(contentLeft || '', query);
+  const rightCount = countOccurrences(contentRight || '', q);
+  const total = leftCount + rightCount;
+  const widgetClass = total === 0 && query ? 'DiffSearchWidget DiffSearchWidgetNoResults' : 'DiffSearchWidget';
+  return [{
+    childCount: 1,
+    className: DiffSearchHeader,
+    type: Div
+  }, {
+    childCount: 2,
+    className: widgetClass,
+    type: Div
+  }, {
+    childCount: 0,
+    className: DiffSearchInput,
+    inputType: 'search',
+    placeholder: search(),
+    type: Input,
+    value: q
+  }, {
+    childCount: 0,
+    className: 'DiffSearchMatchCount',
+    text: `${total} of ${total}`,
+    type: Div
+  }];
+};
+
+const getImageLeftDom = (uriLeft, imageSrc) => {
+  return [{
+    childCount: 1,
+    className: `${DiffEditorContent} ${DiffEditorContentLeft}`,
+    onClick: HandleClickLeftSide,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ImageContent,
+    type: Div
+  }, {
+    alt: uriLeft,
+    childCount: 0,
+    className: ImageElement,
+    src: imageSrc,
+    type: Img
+  }];
 };
 
-const getContentRightDom = (contentRight, errorMessage = '', errorCodeFrame = '', errorStack = '', allowedLinkSchemes = defaultAllowedLinkSchemes, lineNumbers = true, totalLineCount = contentRight ? contentRight.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = [], itemHeight = 20) => {
-  return getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorCodeFrame, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'right', tokenizedLines, visibleLines, itemHeight);
+const getImageRightDom = (uriRight, imageSrc) => {
+  return [{
+    childCount: 1,
+    className: `${DiffEditorContent} ${DiffEditorContentRight}`,
+    onClick: HandleClickRightSide,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ImageContent,
+    type: Div
+  }, {
+    alt: uriRight,
+    childCount: 0,
+    className: ImageElement,
+    src: imageSrc,
+    type: Img
+  }];
 };
 
 const getInlineDiffLineNumberText = row => {
-  const left = row.lineNumberLeft === null ? '-' : String(row.lineNumberLeft);
-  const right = row.lineNumberRight === null ? '-' : String(row.lineNumberRight);
+  if (row.type === InlineDiffRowType.GitButtons || row.type === InlineDiffRowType.IncomingChange) {
+    return '';
+  }
+  const left = row.lineNumberLeft === null ? '' : String(row.lineNumberLeft);
+  const right = row.lineNumberRight === null ? '' : String(row.lineNumberRight);
   return `${left} ${right}`;
 };
 
 const getInlineDiffLineNumberDom = row => {
   return [{
     childCount: 1,
-    className: DiffEditorLineNumber,
+    className: getLineNumberClassName(row.type),
     type: Div
   }, text(getInlineDiffLineNumberText(row))];
 };
@@ -3520,6 +5121,10 @@ const getInlineDiffRowClassName = row => {
   switch (row.type) {
     case InlineDiffRowType.Deletion:
       return EditorRowDeletion;
+    case InlineDiffRowType.GitButtons:
+      return EditorRowGitButtons;
+    case InlineDiffRowType.IncomingChange:
+      return EditorRowIncomingChange;
     case InlineDiffRowType.Insertion:
       return EditorRowInsertion;
     default:
@@ -3531,6 +5136,9 @@ const getInlineDiffRowText = row => {
   switch (row.type) {
     case InlineDiffRowType.Deletion:
       return `- ${row.text}`;
+    case InlineDiffRowType.GitButtons:
+    case InlineDiffRowType.IncomingChange:
+      return row.text;
     case InlineDiffRowType.Insertion:
       return `+ ${row.text}`;
     default:
@@ -3560,23 +5168,25 @@ const getScrollBarDom = () => {
   }];
 };
 
-const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, minLineY, maxLineY) => {
+const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, minLineY, maxLineY, searchVisible, searchQuery, showWhitespace) => {
   const rows = getInlineDiffRows(contentLeft, contentRight);
   const visibleRows = rows.slice(minLineY, maxLineY);
   const contentChildCount = lineNumbers ? 2 : 1;
   const scrollBarActive = visibleRows.length < rows.length;
   const rowsChildCount = visibleRows.length;
+  const buttonsDom = getDiffEditorButtonsDom('inline', showWhitespace);
   const lineNumberDom = lineNumbers ? [{
     childCount: visibleRows.length,
     className: DiffEditorGutter,
     type: Div
   }, ...visibleRows.flatMap(getInlineDiffLineNumberDom)] : [];
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
+  const searchHeaderDom = searchVisible ? getDiffSearchHeaderDom(contentLeft, contentRight, searchQuery) : [];
   return [{
-    childCount: scrollBarActive ? 2 : 1,
+    childCount: (scrollBarActive ? 3 : 2) + (searchVisible ? 1 : 0),
     className: mergeClassNames(Viewlet, DiffEditor, InlineDiffEditor),
     type: Div
-  }, {
+  }, ...searchHeaderDom, {
     childCount: contentChildCount,
     className: `${DiffEditorContent} ${InlineDiffEditorContent}`,
     type: Div
@@ -3584,7 +5194,7 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
     childCount: rowsChildCount,
     className: DiffEditorRows,
     type: Div
-  }, ...visibleRows.flatMap(getInlineDiffRowDom), ...scrollBarDom];
+  }, ...visibleRows.flatMap(getInlineDiffRowDom), ...buttonsDom, ...scrollBarDom];
 };
 
 const getSashDom = sashLayoutClass => ({
@@ -3595,6 +5205,28 @@ const getSashDom = sashLayoutClass => ({
   type: Div
 });
 
+const getRootDom = (childCount, className) => {
+  return {
+    childCount,
+    className,
+    onContextMenu: HandleContextMenu,
+    onWheel: HandleWheel,
+    type: Div
+  };
+};
+const getEditorBodyDom = diffEditorLayoutClass => {
+  return {
+    childCount: 3,
+    className: `${DiffEditorBody} ${diffEditorLayoutClass}`,
+    type: Div
+  };
+};
+const getDiffEditorWithSearchDom = (diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, buttonsDom, scrollBarDom, scrollBarActive, contentLeft, contentRight, searchQuery) => {
+  return [getRootDom(scrollBarActive ? 4 : 3, `${Viewlet} ${DiffEditor} ${diffEditorLayoutClass} ${DiffEditorWithSearch}`), ...getDiffSearchHeaderDom(contentLeft, contentRight, searchQuery), getEditorBodyDom(diffEditorLayoutClass), ...leftDom, getSashDom(sashLayoutClass), ...rightDom, ...buttonsDom, ...scrollBarDom];
+};
+const getDiffEditorWithoutSearchDom = (diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, buttonsDom, scrollBarDom, scrollBarActive) => {
+  return [getRootDom(scrollBarActive ? 5 : 4, `${Viewlet} ${DiffEditor} ${diffEditorLayoutClass}`), ...leftDom, getSashDom(sashLayoutClass), ...rightDom, ...buttonsDom, ...scrollBarDom];
+};
 const getDiffEditorVirtualDom = state => {
   const {
     allowedLinkSchemes,
@@ -3607,7 +5239,10 @@ const getDiffEditorVirtualDom = state => {
     errorRightCodeFrame,
     errorRightMessage,
     errorRightStack,
+    imageSrcLeft,
+    imageSrcRight,
     inlineChanges,
+    inputValue,
     itemHeight,
     layout,
     lineNumbers,
@@ -3616,31 +5251,63 @@ const getDiffEditorVirtualDom = state => {
     renderModeLeft,
     renderModeRight,
     scrollBarActive,
+    searchQuery,
+    searchVisible,
+    showWhitespace,
     tokenizedLinesLeft,
     tokenizedLinesRight,
     totalLineCountLeft,
     totalLineCountRight,
+    uriLeft,
+    uriRight,
     visibleLinesLeft,
     visibleLinesRight
   } = state;
   const canRenderInline = diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage;
   if (canRenderInline) {
-    return getInlineDiffEditorVirtualDom(contentLeft, contentRight, lineNumbers, minLineY, maxLineY);
+    return getInlineDiffEditorVirtualDom(contentLeft, contentRight, lineNumbers, minLineY, maxLineY, searchVisible, searchQuery, showWhitespace);
   }
   const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text';
   const diffEditorLayoutClass = layout === 'vertical' ? DiffEditorVertical : DiffEditorHorizontal;
   const sashLayoutClass = layout === 'vertical' ? SashHorizontal : SashVertical;
-  const leftDom = getContentLeftDom(contentLeft, errorLeftMessage, errorLeftCodeFrame, errorLeftStack, allowedLinkSchemes, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges, tokenizedLinesLeft, visibleLinesLeft, itemHeight);
-  const rightDom = getContentRightDom(contentRight, errorRightMessage, errorRightCodeFrame, errorRightStack, allowedLinkSchemes, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges, tokenizedLinesRight, visibleLinesRight, itemHeight);
+  const leftDom = renderModeLeft === 'image' && !errorLeftMessage ? getImageLeftDom(uriLeft, imageSrcLeft) : getContentLeftDom({
+    allowedLinkSchemes,
+    contentLeft,
+    errorCodeFrame: errorLeftCodeFrame,
+    errorMessage: errorLeftMessage,
+    errorStack: errorLeftStack,
+    inlineChanges,
+    itemHeight,
+    lineNumbers: showLineNumbers,
+    maxLineY,
+    minLineY,
+    tokenizedLines: tokenizedLinesLeft,
+    totalLineCount: totalLineCountLeft,
+    visibleLines: visibleLinesLeft
+  });
+  const rightDom = renderModeRight === 'image' && !errorRightMessage ? getImageRightDom(uriRight, imageSrcRight) : getContentRightDom({
+    allowedLinkSchemes,
+    contentRight,
+    editable: true,
+    errorCodeFrame: errorRightCodeFrame,
+    errorMessage: errorRightMessage,
+    errorStack: errorRightStack,
+    inlineChanges,
+    inputValue,
+    itemHeight,
+    lineNumbers: showLineNumbers,
+    maxLineY,
+    minLineY,
+    tokenizedLines: tokenizedLinesRight,
+    totalLineCount: totalLineCountRight,
+    visibleLines: visibleLinesRight
+  });
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
-  const dom = [{
-    childCount: scrollBarActive ? 4 : 3,
-    className: `${Viewlet} ${DiffEditor} ${diffEditorLayoutClass}`,
-    onContextMenu: HandleContextMenu,
-    onWheel: HandleWheel,
-    type: Div
-  }, ...leftDom, getSashDom(sashLayoutClass), ...rightDom, ...scrollBarDom];
-  return dom;
+  const buttonsDom = getDiffEditorButtonsDom(diffMode, showWhitespace);
+  if (searchVisible) {
+    return getDiffEditorWithSearchDom(diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, buttonsDom, scrollBarDom, scrollBarActive, contentLeft, contentRight, searchQuery);
+  }
+  return getDiffEditorWithoutSearchDom(diffEditorLayoutClass, sashLayoutClass, leftDom, rightDom, buttonsDom, scrollBarDom, scrollBarActive);
 };
 
 const renderItems = (oldState, newState) => {
@@ -3665,8 +5332,6 @@ const renderIncremental = (oldState, newState) => {
   return ['Viewlet.setPatches', id, patches];
 };
 
-const SourceControlInput = 'SourceControlInput';
-
 const renderValue = (oldState, newState) => {
   const {
     id,
@@ -3679,6 +5344,8 @@ const getRenderer = diffType => {
   switch (diffType) {
     case RenderCss:
       return renderCss;
+    case RenderFocus:
+      return renderFocus;
     case RenderFocusContext:
       return renderFocusContext;
     case RenderIncremental:
@@ -3723,8 +5390,11 @@ const renderEventListeners = () => {
     name: HandleFocus,
     params: ['handleFocus']
   }, {
-    name: HandleClickAt,
-    params: ['handleClickAt', ClientX, ClientY, TargetName]
+    name: HandleClickLeftSide,
+    params: ['handleClickLeftSide']
+  }, {
+    name: HandleClickRightSide,
+    params: ['handleClickRightSide', ClientX, ClientY]
   }, {
     name: HandleMouseOverAt,
     params: ['handleMouseOverAt', ClientX, ClientY]
@@ -3735,15 +5405,16 @@ const renderEventListeners = () => {
     name: HandleMouseOutAt,
     params: ['handleMouseOutAt', ClientX, ClientY]
   }, {
-    name: HandleInput,
-    params: ['handleInput', TargetValue]
+    name: HandleBeforeInput,
+    params: ['handleBeforeInput', 'event.inputType', 'event.data'],
+    preventDefault: true
   }, {
     name: HandleContextMenu,
     params: ['handleContextMenu', Button, ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleClickAction,
-    params: ['handleActionClick', TargetName]
+    params: ['handleClickAction', TargetName]
   }, {
     name: HandleSashPointerDown,
     params: ['handleSashPointerDown', ClientX, ClientY],
@@ -3789,40 +5460,16 @@ const saveState = uid => {
   };
 };
 
-const setDiffMode = (state, diffMode) => {
-  if (state.diffMode === diffMode) {
+const setFontFamily = (state, fontFamily) => {
+  if (state.fontFamily === fontFamily) {
     return state;
   }
-  const totalLineCount = getTotalLineCount(diffMode, state.contentLeft, state.contentRight, state.errorLeftMessage, state.errorLeftCodeFrame, state.errorLeftStack, state.errorRightMessage, state.errorRightCodeFrame, state.errorRightStack, state.renderModeLeft, state.renderModeRight);
-  const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
-  const nextState = {
-    ...state,
-    diffMode,
-    totalLineCount,
-    ...scrollState
-  };
   return {
-    ...nextState,
-    ...getVisibleLinesState({
-      contentLeft: nextState.contentLeft,
-      contentRight: nextState.contentRight,
-      inlineChanges: nextState.inlineChanges,
-      maxLineY: nextState.maxLineY,
-      minLineY: nextState.minLineY,
-      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
-      tokenizedLinesRight: nextState.tokenizedLinesRight,
-      totalLineCountLeft: nextState.totalLineCountLeft,
-      totalLineCountRight: nextState.totalLineCountRight
-    })
+    ...state,
+    fontFamily
   };
 };
 
-const getNextPaneSizes = (state, layout) => {
-  const totalPaneSize = state.leftWidth + state.rightWidth;
-  const ratio = totalPaneSize === 0 ? 0.5 : state.leftWidth / totalPaneSize;
-  const size = layout === 'vertical' ? state.height : state.width;
-  return getPaneSizes(size, ratio);
-};
 const setLayout = (state, layout) => {
   if (state.layout === layout) {
     return state;
@@ -3830,7 +5477,7 @@ const setLayout = (state, layout) => {
   const {
     leftWidth,
     rightWidth
-  } = getNextPaneSizes(state, layout);
+  } = getNextPaneSizes(state, layout, state.width, state.height);
   return {
     ...state,
     layout,
@@ -3841,12 +5488,34 @@ const setLayout = (state, layout) => {
   };
 };
 
+const showSearch = state => {
+  return {
+    ...state,
+    searchVisible: true
+  };
+};
+
 const commandMap = {
   'Diff.getCommandIds': getCommandIds,
   'DiffView.create': create2,
+  'DiffView.deleteLeft': wrapCommand(deleteLeft),
+  'DiffView.deleteRight': wrapCommand(deleteRight),
   'DiffView.diff2': diff2,
   'DiffView.getCommandIds': getCommandIds,
+  'DiffView.getKeyBindings': getKeyBindings,
+  'DiffView.getMenuEntries': getMenuEntries,
+  'DiffView.getMenuEntries2': getMenuEntries2,
+  'DiffView.getMenuIds': getMenuIds,
+  'DiffView.handleBeforeInput': wrapCommand(handleBeforeInput),
+  'DiffView.handleClickAction': wrapCommand(handleClickAction),
+  'DiffView.handleClickAt': wrapCommand(handleClickAt),
+  'DiffView.handleClickLeftSide': wrapCommand(handleClickLeftSide),
+  'DiffView.handleClickRightSide': wrapCommand(handleClickRightSide),
   'DiffView.handleContextMenu': wrapCommand(handleContextMenu),
+  'DiffView.handleCopy': wrapCommand(handleCopy),
+  'DiffView.handleCut': wrapCommand(handleCut),
+  'DiffView.handleInput': wrapCommand(handleInput),
+  'DiffView.handlePaste': wrapCommand(handlePaste),
   'DiffView.handleResize': wrapCommand(handleResize),
   'DiffView.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'DiffView.handleSashPointerMove': wrapCommand(handleSashPointerMove),
@@ -3854,15 +5523,33 @@ const commandMap = {
   'DiffView.handleScrollBarPointerDown': wrapCommand(handleScrollBarPointerDown),
   'DiffView.handleScrollBarPointerMove': wrapCommand(handleScrollBarPointerMove),
   'DiffView.handleScrollBarPointerUp': wrapCommand(handleScrollBarPointerUp),
+  'DiffView.handleSearchInput': wrapCommand(handleSearchInput),
   'DiffView.handleWheel': wrapCommand(handleWheel),
+  'DiffView.handleWorkspaceChange': wrapCommand(handleWorkspaceChange),
+  'DiffView.hideSearch': wrapCommand(hideSearch),
   'DiffView.initialize': initialize,
+  'DiffView.insertLineBreak': wrapCommand(insertLineBreak),
+  'DiffView.jumpToNextChange': wrapCommand(jumpToNextChange),
+  'DiffView.jumpToPreviousChange': wrapCommand(jumpToPreviousChange),
   'DiffView.loadContent': wrapCommand(loadContent),
+  'DiffView.moveCursorDown': wrapCommand(moveCursorDown),
+  'DiffView.moveCursorLeft': wrapCommand(moveCursorLeft),
+  'DiffView.moveCursorRight': wrapCommand(moveCursorRight),
+  'DiffView.moveCursorToEndOfLine': wrapCommand(moveCursorToEndOfLine),
+  'DiffView.moveCursorToStartOfLine': wrapCommand(moveCursorToStartOfLine),
+  'DiffView.moveCursorUp': wrapCommand(moveCursorUp),
   'DiffView.render2': render2,
   'DiffView.renderEventListeners': renderEventListeners,
+  'DiffView.resize': wrapCommand(handleResize),
   'DiffView.saveState': saveState,
+  'DiffView.setCursorPosition': wrapCommand(setCursorPosition),
   'DiffView.setDiffMode': wrapCommand(setDiffMode),
+  'DiffView.setFontFamily': wrapCommand(setFontFamily),
   'DiffView.setLayout': wrapCommand(setLayout),
+  'DiffView.showSearch': wrapCommand(showSearch),
   'DiffView.terminate': terminate,
+  'DiffView.toggleDiffMode': wrapCommand(toggleDiffMode),
+  'DiffView.toggleWhitespace': wrapCommand(toggleWhitespace),
   'Initialize.initialize': initialize
 };
 
@@ -3871,7 +5558,7 @@ const listen = async () => {
   const rpc = await create$2({
     commandMap: commandMap
   });
-  set$3(rpc);
+  set$2(rpc);
 };
 
 const main = async () => {