@lvce-editor/editor-worker 19.71.6 → 19.72.1

package/dist/editorWorkerMain.js

@@ -2023,13 +2023,6 @@ const getScrollBarSize = (size, contentSize, minimumSliderSize) => {
   return Math.max(Math.round(size ** 2 / contentSize), minimumSliderSize);
 };
 
-const getScrollBarWidth = (width, longestLineWidth) => {
-  if (width > longestLineWidth) {
-    return 0;
-  }
-  return width ** 2 / longestLineWidth;
-};
-
 const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
   const halfScrollBarHeight = scrollBarHeight / 2;
   if (relativeY <= halfScrollBarHeight) {
@@ -2364,6 +2357,190 @@ const getDecorationClassName = type => {
   }
 };
 
+const getHorizontalScrollDimensions = ({
+  gutterWidth = 0,
+  width,
+  x = 0
+}) => {
+  return {
+    width: Math.max(0, width - gutterWidth),
+    x: x + gutterWidth
+  };
+};
+
+const defaultThreshold = 500;
+const getSegments = line => {
+  if ('Segmenter' in Intl) {
+    // @ts-ignore
+    return [...new Intl.Segmenter(undefined, {
+      granularity: 'grapheme'
+    }).segment(line)];
+  }
+  const segments = [];
+  let index = 0;
+  for (const segment of line) {
+    segments.push({
+      index,
+      segment
+    });
+    index += segment.length;
+  }
+  return segments;
+};
+const getCharacterWidth = (character, tabSize) => {
+  if (character === '\t') {
+    return tabSize;
+  }
+  // Grapheme clusters such as combining characters and ZWJ emoji are indivisible.
+  // Treat each cluster as one display column; the extra cluster below is a safe overscan.
+  return 1;
+};
+const getHorizontalDisplayColumn = (line, sourceColumn, tabSize) => {
+  let displayColumn = 0;
+  for (const {
+    index,
+    segment
+  } of getSegments(line)) {
+    if (index + segment.length > sourceColumn) {
+      break;
+    }
+    displayColumn += segment === '\t' ? tabSize : segment.length;
+  }
+  return displayColumn;
+};
+const getHorizontalVisibleRange = (line, deltaX, width, averageCharWidth, tabSize, threshold = defaultThreshold) => {
+  if (line.length <= threshold) {
+    return {
+      end: line.length,
+      start: 0
+    };
+  }
+  const charWidth = averageCharWidth > 0 ? averageCharWidth : 1;
+  const scrollOffset = Math.max(0, Number.isFinite(deltaX) ? deltaX : 0);
+  const viewportWidth = Number.isFinite(width) ? Math.max(0, width) : Infinity;
+  const targetStart = scrollOffset / charWidth;
+  const targetEnd = (scrollOffset + viewportWidth) / charWidth;
+  let column = 0;
+  let index = 0;
+  let start = 0;
+  let started = false;
+  const segments = getSegments(line);
+  for (const {
+    index: segmentIndex,
+    segment
+  } of segments) {
+    const nextColumn = column + getCharacterWidth(segment, tabSize);
+    if (!started && nextColumn <= targetStart) {
+      column = nextColumn;
+      index = segmentIndex + segment.length;
+      start = index;
+      continue;
+    }
+    if (!started) {
+      start = segmentIndex;
+      started = true;
+    }
+    index = segmentIndex + segment.length;
+    column = nextColumn;
+    if (column >= targetEnd) {
+      break;
+    }
+  }
+  if (!started) {
+    start = index;
+  }
+  // Keep one extra complete grapheme to cover fractional offsets and avoid a blank edge.
+  if (index < line.length) {
+    const nextSegment = segments.find(({
+      index: segmentIndex
+    }) => segmentIndex >= index);
+    if (nextSegment) {
+      index = nextSegment.index + nextSegment.segment.length;
+    }
+  }
+  return {
+    end: index,
+    start
+  };
+};
+const getHorizontalVisibleRangeMeasured = async (line, deltaX, width, averageCharWidth, tabSize, threshold, measureWidth) => {
+  const fallback = () => {
+    const range = getHorizontalVisibleRange(line, deltaX, width, averageCharWidth, tabSize, threshold);
+    return {
+      ...range,
+      difference: getHorizontalVisibleDifference(line, range.start, deltaX, averageCharWidth, tabSize)
+    };
+  };
+  if (line.length <= threshold) {
+    return fallback();
+  }
+  const scrollOffset = Math.max(0, Number.isFinite(deltaX) ? deltaX : 0);
+  const viewportWidth = Number.isFinite(width) ? Math.max(0, width) : Infinity;
+  const segments = getSegments(line);
+  const boundaries = [0, ...segments.map(({
+    index,
+    segment
+  }) => index + segment.length)];
+  const measurements = new Map([[0, 0]]);
+  const measureBoundary = async boundaryIndex => {
+    const cached = measurements.get(boundaryIndex);
+    if (cached !== undefined) {
+      return cached;
+    }
+    const prefix = line.slice(0, boundaries[boundaryIndex]).replaceAll('\t', () => ' '.repeat(tabSize));
+    const measured = await measureWidth(prefix);
+    measurements.set(boundaryIndex, measured);
+    return measured;
+  };
+  const findGreatestBoundaryAtMost = async target => {
+    let low = 0;
+    let high = boundaries.length;
+    while (low < high) {
+      const middle = Math.floor((low + high) / 2);
+      if ((await measureBoundary(middle)) <= target) {
+        low = middle + 1;
+      } else {
+        high = middle;
+      }
+    }
+    return Math.max(0, low - 1);
+  };
+  const findFirstBoundaryAtLeast = async target => {
+    let low = 0;
+    let high = boundaries.length;
+    while (low < high) {
+      const middle = Math.floor((low + high) / 2);
+      if ((await measureBoundary(middle)) < target) {
+        low = middle + 1;
+      } else {
+        high = middle;
+      }
+    }
+    return Math.min(boundaries.length - 1, low);
+  };
+  try {
+    const startBoundary = await findGreatestBoundaryAtMost(scrollOffset);
+    const endBoundary = await findFirstBoundaryAtLeast(scrollOffset + viewportWidth);
+    const start = boundaries[startBoundary];
+    let end = boundaries[endBoundary];
+    if (end < line.length) {
+      end = boundaries[Math.min(boundaries.length - 1, endBoundary + 1)];
+    }
+    return {
+      difference: (await measureBoundary(startBoundary)) - scrollOffset,
+      end,
+      start
+    };
+  } catch {
+    return fallback();
+  }
+};
+const getHorizontalVisibleDifference = (line, start, deltaX, averageCharWidth, tabSize) => {
+  const charWidth = averageCharWidth > 0 ? averageCharWidth : 1;
+  const scrollOffset = Number.isFinite(deltaX) ? deltaX : 0;
+  return getHorizontalDisplayColumn(line, start, tabSize) * charWidth - scrollOffset;
+};
+
 // Large files have no token cache. Only materialize the text inside the horizontal viewport.
 const getLargeFileVisible = editor => {
   const {
@@ -2762,6 +2939,31 @@ const loadTokenizers = async languageIds => {
   }
 };
 
+const RE_ASCII = /^\p{ASCII}*$/u;
+const isAscii = line => {
+  return RE_ASCII.test(line);
+};
+
+const measureTextWidthFast = async (text, charWidth) => {
+  return text.length * charWidth;
+};
+
+const measureTextWidthSlow = async (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
+  const width = await invoke$e('TextMeasurement.measureTextWidth', text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
+  return width;
+};
+
+const measureTextWidth = async (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
+  // TODO maybe have a property for the whole text document
+  // whether the document is ASCII or not
+  // so that it doesn't need to be checked on every cursor change
+  // or scroll position change
+  if (isMonoSpaceFont && isAscii(text)) {
+    return await measureTextWidthFast(text, charWidth);
+  }
+  return await measureTextWidthSlow(text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
+};
+
 const Dot = '.';
 const DoubleQuote$1 = '"';
 const EmptyString = '';
@@ -2999,20 +3201,27 @@ const getStartDefaults = (tokens, minOffset) => {
   let start = 0;
   let end = 0;
   let startIndex = 0;
+  let found = false;
   const tokensLength = tokens.length;
   for (let i = 0; i < tokensLength; i += 2) {
     const tokenLength = tokens[i + 1];
     end += tokenLength;
     start = end;
-    if (start >= minOffset) {
+    if (start > minOffset) {
       start -= tokenLength;
       end -= tokenLength;
       startIndex = i;
+      found = true;
       break;
     }
   }
+  if (!found) {
+    return {
+      start: end,
+      startIndex: tokensLength
+    };
+  }
   return {
-    end,
     start,
     startIndex
   };
@@ -3063,20 +3272,24 @@ const getLineInfoEmbeddedFull = (embeddedResults, tokenResults, line, decoration
   const embeddedTokenMap = embeddedResult.TokenMap;
   const tokensLength = embeddedTokens.length;
   let {
-    end,
     start,
     startIndex
   } = getStartDefaults(embeddedTokens, minOffset);
-  const difference = getDifference(start, averageCharWidth, deltaX);
+  const difference = getHorizontalVisibleDifference(line, Math.max(start, minOffset), deltaX, averageCharWidth, tabSize);
   for (let i = startIndex; i < tokensLength; i += 2) {
     const tokenType = embeddedTokens[i];
     const tokenLength = embeddedTokens[i + 1];
     const tokenEnd = start + tokenLength;
-    const hasOverlap = hasDecorationOverlap(decorationMap, start, tokenEnd);
+    const tokenStart = Math.max(start, minOffset);
+    const visibleTokenEnd = Math.min(tokenEnd, maxOffset);
+    if (tokenStart >= visibleTokenEnd) {
+      break;
+    }
+    const hasOverlap = hasDecorationOverlap(decorationMap, tokenStart, visibleTokenEnd);
     if (hasOverlap) {
       // Token has decoration overlap - split into parts
-      let currentPos = start;
-      while (currentPos < tokenEnd) {
+      let currentPos = tokenStart;
+      while (currentPos < visibleTokenEnd) {
         // Find if current position is inside a decoration
         const activeDecoration = getActiveDecoration(decorationMap, currentPos);
         let partEnd;
@@ -3084,15 +3297,15 @@ const getLineInfoEmbeddedFull = (embeddedResults, tokenResults, line, decoration
         let className;
         if (activeDecoration) {
           // Render decorated part
-          partEnd = Math.min(tokenEnd, activeDecoration.end);
+          partEnd = Math.min(visibleTokenEnd, activeDecoration.end);
           text = line.slice(currentPos, partEnd);
           const baseTokenClass = embeddedTokenMap[tokenType] || 'Unknown';
           className = `Token ${baseTokenClass} ${activeDecoration.className}`;
         } else {
           // Find next decoration start or token end
-          let nextDecorationStart = tokenEnd;
+          let nextDecorationStart = visibleTokenEnd;
           for (const [decorationStart] of decorationMap) {
-            if (decorationStart > currentPos && decorationStart < tokenEnd) {
+            if (decorationStart > currentPos && decorationStart < visibleTokenEnd) {
               nextDecorationStart = Math.min(nextDecorationStart, decorationStart);
             }
           }
@@ -3108,14 +3321,13 @@ const getLineInfoEmbeddedFull = (embeddedResults, tokenResults, line, decoration
       }
     } else {
       // No decoration overlap - render token normally
-      const text = line.slice(start, tokenEnd);
+      const text = line.slice(tokenStart, visibleTokenEnd);
       const className = `Token ${embeddedTokenMap[tokenType] || 'Unknown'}`;
       const normalizedText = normalizeText(text, normalize, tabSize);
       lineInfo.push(normalizedText, className);
     }
     start = tokenEnd;
-    end = tokenEnd;
-    if (end >= maxOffset) {
+    if (start >= maxOffset) {
       break;
     }
   }
@@ -3124,17 +3336,6 @@ const getLineInfoEmbeddedFull = (embeddedResults, tokenResults, line, decoration
     lineInfo
   };
 };
-const getOffsets = () => {
-  return {
-    maxOffset: Infinity,
-    minOffset: 0
-  };
-};
-const getDifference = (start, averageCharWidth, deltaX) => {
-  const beforeWidth = start * averageCharWidth;
-  const difference = beforeWidth - deltaX;
-  return difference;
-};
 const appendTokenRange = (resultTokens, resultTokenMap, tokens, tokenMap, rangeStart, rangeEnd) => {
   let tokenStart = 0;
   for (let i = 0; i < tokens.length; i += 2) {
@@ -3190,21 +3391,25 @@ const getLineInfoDefault = (line, tokenResults, embeddedResults, decorations, To
     tokens
   } = tokenResults;
   let {
-    end,
     start,
     startIndex
   } = getStartDefaults(tokens, minOffset);
-  const difference = getDifference(start, averageCharWidth, deltaX);
+  const difference = getHorizontalVisibleDifference(line, Math.max(start, minOffset), deltaX, averageCharWidth, tabSize);
   const tokensLength = tokens.length;
   for (let i = startIndex; i < tokensLength; i += 2) {
     const tokenType = tokens[i];
     const tokenLength = tokens[i + 1];
     const tokenEnd = start + tokenLength;
-    const hasOverlap = hasDecorationOverlap(decorationMap, start, tokenEnd);
+    const tokenStart = Math.max(start, minOffset);
+    const visibleTokenEnd = Math.min(tokenEnd, maxOffset);
+    if (tokenStart >= visibleTokenEnd) {
+      break;
+    }
+    const hasOverlap = hasDecorationOverlap(decorationMap, tokenStart, visibleTokenEnd);
     if (hasOverlap) {
       // Token has decoration overlap - split into parts
-      let currentPos = start;
-      while (currentPos < tokenEnd) {
+      let currentPos = tokenStart;
+      while (currentPos < visibleTokenEnd) {
         // Find if current position is inside a decoration
         const activeDecoration = getActiveDecoration(decorationMap, currentPos);
         let partEnd;
@@ -3212,15 +3417,15 @@ const getLineInfoDefault = (line, tokenResults, embeddedResults, decorations, To
         let className;
         if (activeDecoration) {
           // Render decorated part
-          partEnd = Math.min(tokenEnd, activeDecoration.end);
+          partEnd = Math.min(visibleTokenEnd, activeDecoration.end);
           text = line.slice(currentPos, partEnd);
           const baseTokenClass = TokenMap[tokenType] || 'Unknown';
           className = `Token ${baseTokenClass} ${activeDecoration.className}`;
         } else {
           // Find next decoration start or token end
-          let nextDecorationStart = tokenEnd;
+          let nextDecorationStart = visibleTokenEnd;
           for (const [decorationStart] of decorationMap) {
-            if (decorationStart > currentPos && decorationStart < tokenEnd) {
+            if (decorationStart > currentPos && decorationStart < visibleTokenEnd) {
               nextDecorationStart = Math.min(nextDecorationStart, decorationStart);
             }
           }
@@ -3236,14 +3441,13 @@ const getLineInfoDefault = (line, tokenResults, embeddedResults, decorations, To
       }
     } else {
       // No decoration overlap - render token normally
-      const text = line.slice(start, tokenEnd);
+      const text = line.slice(tokenStart, visibleTokenEnd);
       const className = `Token ${TokenMap[tokenType] || 'Unknown'}`;
       const normalizedText = normalizeText(text, normalize, tabSize);
       lineInfo.push(normalizedText, className);
     }
     start = tokenEnd;
-    end = tokenEnd;
-    if (end >= maxOffset) {
+    if (start >= maxOffset) {
       break;
     }
   }
@@ -3252,11 +3456,11 @@ const getLineInfoDefault = (line, tokenResults, embeddedResults, decorations, To
     lineInfo
   };
 };
-const getLineInfo$1 = (line, tokenResults, embeddedResults, decorations, TokenMap, lineOffset, normalize, tabSize, width, deltaX, averageCharWidth) => {
+const getLineInfo$1 = (line, tokenResults, embeddedResults, decorations, TokenMap, lineOffset, normalize, tabSize, width, deltaX, averageCharWidth, measuredRange) => {
   const {
-    maxOffset,
-    minOffset
-  } = getOffsets();
+    end: maxOffset,
+    start: minOffset
+  } = measuredRange;
   if (embeddedResults.length > 0 && tokenResults.embeddedResultIndex !== undefined) {
     const embeddedResult = embeddedResults[tokenResults.embeddedResultIndex];
     if (embeddedResult?.isFull) {
@@ -3271,9 +3475,10 @@ const getLineInfo$1 = (line, tokenResults, embeddedResults, decorations, TokenMa
 };
 
 // TODO need lots of tests for this
-const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLineY, minLineOffset, width, deltaX, averageCharWidth) => {
+const getLineInfosViewport = async (editor, tokens, embeddedResults, minLineY, maxLineY, minLineOffset, width, deltaX, averageCharWidth, horizontalVirtualizationThreshold) => {
   const result = [];
   const differences = [];
+  const horizontalVisibleRanges = [];
   const {
     decorations,
     languageId,
@@ -3281,10 +3486,11 @@ const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLine
   } = editor;
   const tokenMap = get$5(languageId);
   let offset = minLineOffset;
-  const tabSize = 2;
+  const tabSize = editor.tabSize ?? 2;
   for (let i = minLineY; i < maxLineY; i++) {
     const line = lines[i];
     const normalize = shouldNormalizeText(line);
+    const measuredRange = await getHorizontalVisibleRangeMeasured(line, deltaX, width, averageCharWidth, tabSize, horizontalVirtualizationThreshold, text => measureTextWidth(text, editor.fontWeight, editor.fontSize, editor.fontFamily, editor.letterSpacing, editor.isMonospaceFont, editor.charWidth));
 
     // Use decorations that were pre-computed (includes links and diagnostics)
     // Filter decorations to only include those for this line
@@ -3301,15 +3507,20 @@ const getLineInfosViewport = (editor, tokens, embeddedResults, minLineY, maxLine
       }
     }
     const {
-      difference,
       lineInfo
-    } = getLineInfo$1(line, tokens[i - minLineY], embeddedResults, lineDecorations, tokenMap, offset, normalize, tabSize, width, deltaX, averageCharWidth);
+    } = getLineInfo$1(line, tokens[i - minLineY], embeddedResults, lineDecorations, tokenMap, offset, normalize, tabSize, width, deltaX, averageCharWidth, measuredRange);
     result.push(lineInfo);
-    differences.push(difference);
+    differences.push(measuredRange.difference);
+    horizontalVisibleRanges.push({
+      end: measuredRange.end,
+      rowIndex: i,
+      start: measuredRange.start
+    });
     offset += line.length + 1;
   }
   return {
     differences,
+    horizontalVisibleRanges,
     result
   };
 };
@@ -3317,11 +3528,15 @@ const getVisible$1 = async (editor, syncIncremental) => {
   if (editor.lifecycle?.disposed) {
     return {
       differences: [],
+      horizontalVisibleRanges: [],
       textInfos: []
     };
   }
   if (editor.largeFile) {
-    return getLargeFileVisible(editor);
+    return {
+      ...(await getLargeFileVisible(editor)),
+      horizontalVisibleRanges: []
+    };
   }
   // TODO should separate rendering from business logic somehow
   // currently hard to test because need to mock editor height, top, left,
@@ -3331,15 +3546,19 @@ const getVisible$1 = async (editor, syncIncremental) => {
   const {
     charWidth,
     deltaX,
-    lines,
-    width
+    horizontalVirtualizationThreshold = 500,
+    lines
   } = editor;
+  const {
+    width
+  } = getHorizontalScrollDimensions(editor);
   const visibleLineIndices = (editor.visibleLineIndices ?? Array.from({
     length: Math.max(0, Math.min(editor.maxLineY ?? editor.minLineY + editor.numberOfVisibleLines, lines.length) - editor.minLineY)
   }, (_, index) => editor.minLineY + index)).filter(rowIndex => rowIndex >= 0 && rowIndex < lines.length);
   if (visibleLineIndices.length === 0) {
     return {
       differences: [],
+      horizontalVisibleRanges: [],
       textInfos: []
     };
   }
@@ -3356,6 +3575,7 @@ const getVisible$1 = async (editor, syncIncremental) => {
     if (editor.lifecycle?.disposed) {
       return {
         differences: [],
+        horizontalVisibleRanges: [],
         textInfos: []
       };
     }
@@ -3370,6 +3590,7 @@ const getVisible$1 = async (editor, syncIncremental) => {
   if (editor.lifecycle?.disposed) {
     return {
       differences: [],
+      horizontalVisibleRanges: [],
       textInfos: []
     };
   }
@@ -3377,11 +3598,15 @@ const getVisible$1 = async (editor, syncIncremental) => {
   const averageCharWidth = charWidth;
   const {
     differences: allDifferences,
+    horizontalVisibleRanges: allHorizontalVisibleRanges,
     result: allTextInfos
-  } = getLineInfosViewport(editor, tokens, embeddedResults, minLineY, maxLineY, minLineOffset, width, deltaX, averageCharWidth);
+  } = await getLineInfosViewport(editor, tokens, embeddedResults, minLineY, maxLineY, minLineOffset, width, deltaX, averageCharWidth, horizontalVirtualizationThreshold);
   const relativeIndices = visibleLineIndices.map(rowIndex => rowIndex - minLineY);
   return {
     differences: relativeIndices.map(index => allDifferences[index]),
+    horizontalVisibleRanges: allHorizontalVisibleRanges.filter(({
+      rowIndex
+    }) => visibleLineIndices.includes(rowIndex)),
     textInfos: relativeIndices.map(index => allTextInfos[index])
   };
 };
@@ -3430,11 +3655,13 @@ const setDeltaY$1 = async (state, value) => {
   const syncIncremental = getEnabled();
   const {
     differences,
+    horizontalVisibleRanges,
     textInfos
   } = await getVisible$1(newEditor1, syncIncremental);
   const newEditor2 = {
     ...newEditor1,
     differences,
+    horizontalVisibleRanges,
     textInfos
   };
   return newEditor2;
@@ -3461,6 +3688,11 @@ const getIncrementalEdits = async (oldState, newState) => {
       } = newState;
       const oldLine = oldState.lines[rowIndex];
       const newLine = lines[rowIndex];
+      // Renderer edit offsets address full lines, so clipped rows need a fresh visible window.
+      const threshold = newState.horizontalVirtualizationThreshold ?? 500;
+      if (newState.deltaX !== 0 || oldLine.length > threshold || newLine.length > threshold) {
+        return emptyIncrementalEdits;
+      }
       // @ts-ignore
       const incrementalEdits = await invoke$b(
       // @ts-ignore
@@ -3878,7 +4110,7 @@ const invoke$a = async (method, ...args) => {
 const invoke$9 = async (applicationId, method, ...args) => {
   return applicationId === undefined ? invoke$d(method, ...args) : invoke$d('Application.execute', applicationId, method, ...args);
 };
-const readFile = async (applicationId, uri) => {
+const readFile$1 = async (applicationId, uri) => {
   return applicationId === undefined ? invoke$a('FileSystem.readFile', uri) : invoke$a('ApplicationFileSystem.execute', applicationId, 'readFile', uri);
 };
 
@@ -3911,31 +4143,6 @@ const getTabCount = string => {
   return count;
 };
 
-const RE_ASCII = /^\p{ASCII}*$/u;
-const isAscii = line => {
-  return RE_ASCII.test(line);
-};
-
-const measureTextWidthFast = async (text, charWidth) => {
-  return text.length * charWidth;
-};
-
-const measureTextWidthSlow = async (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
-  const width = await invoke$e('TextMeasurement.measureTextWidth', text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
-  return width;
-};
-
-const measureTextWidth = async (text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth) => {
-  // TODO maybe have a property for the whole text document
-  // whether the document is ASCII or not
-  // so that it doesn't need to be checked on every cursor change
-  // or scroll position change
-  if (isMonoSpaceFont && isAscii(text)) {
-    return await measureTextWidthFast(text, charWidth);
-  }
-  return await measureTextWidthSlow(text, fontWeight, fontSize, fontFamily, letterSpacing, isMonoSpaceFont, charWidth);
-};
-
 const getX = async (line, column, fontWeight, fontSize, fontFamily, isMonospaceFont, letterSpacing, tabSize, halfCursorWidth, width, averageCharWidth, difference = 0) => {
   if (!line) {
     return 0;
@@ -4409,11 +4616,13 @@ const scheduleDocumentAndCursorsSelections = async (editor, changes, selectionCh
   const syncIncremental = getEnabled();
   const {
     differences,
+    horizontalVisibleRanges,
     textInfos
   } = await getVisible$1(newEditor2, syncIncremental);
   return {
     ...newEditor2,
     differences,
+    horizontalVisibleRanges,
     textInfos
   };
 };
@@ -4448,11 +4657,13 @@ const scheduleDocumentAndCursorsSelectionIsUndo = async (editor, changes, select
   const syncIncremental = getEnabled();
   const {
     differences,
+    horizontalVisibleRanges,
     textInfos
   } = await getVisible$1(finalEditor, syncIncremental);
   return {
     ...finalEditor,
     differences,
+    horizontalVisibleRanges,
     textInfos
   };
 };
@@ -4492,11 +4703,13 @@ const scheduleDocument = async (editor, changes) => {
   const syncIncremental = getEnabled();
   const {
     differences,
+    horizontalVisibleRanges,
     textInfos
   } = await getVisible$1(finalEditor, syncIncremental);
   return {
     ...finalEditor,
     differences,
+    horizontalVisibleRanges,
     textInfos
   };
   // RendererProcess.send([
@@ -5140,6 +5353,69 @@ const getVisibleDiagnostics = async (editor, diagnostics) => {
   return visibleDiagnostics;
 };
 
+// Owned by the editor lifecycle, with only the current document's distinct lines retained.
+const caches = new WeakMap();
+const updateHorizontalLayout = async state => {
+  const {
+    breakPoints = [],
+    deltaX,
+    gutterDecorations = [],
+    largeFile,
+    lifecycle,
+    lightBulbRowIndex = -1,
+    lineNumbers
+  } = state;
+  if (largeFile || lifecycle?.disposed) {
+    return state;
+  }
+  const {
+    charWidth,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    isMonospaceFont,
+    letterSpacing,
+    lines,
+    tabSize,
+    width
+  } = state;
+  const font = JSON.stringify([charWidth, fontFamily, fontSize, fontWeight, isMonospaceFont, letterSpacing, tabSize]);
+  const owner = lifecycle || lines;
+  const previous = caches.get(owner);
+  const previousWidths = previous?.font === font ? previous.widths : undefined;
+  const widths = new Map();
+  let longestLineWidth = 0;
+  for (const line of lines) {
+    let measured = widths.get(line) ?? previousWidths?.get(line);
+    if (measured === undefined) {
+      measured = await measureTextWidth(line.replaceAll('\t', () => ' '.repeat(tabSize)), fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth);
+    }
+    widths.set(line, measured);
+    longestLineWidth = Math.max(longestLineWidth, measured);
+  }
+  const showGutter = lineNumbers || breakPoints.length > 0 || lightBulbRowIndex >= 0 || gutterDecorations.length > 0;
+  const gutterText = String(lines.length);
+  let gutterWidth = 0;
+  if (showGutter) {
+    const measured = widths.get(gutterText) ?? previousWidths?.get(gutterText) ?? (await measureTextWidth(gutterText, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth));
+    widths.set(gutterText, measured);
+    gutterWidth = Math.max(30, measured + 1);
+  }
+  if (lifecycle?.disposed) {
+    return state;
+  }
+  caches.set(owner, {
+    font,
+    widths
+  });
+  return {
+    ...state,
+    deltaX: clamp(deltaX, 0, Math.max(0, longestLineWidth - Math.max(0, width - gutterWidth))),
+    gutterWidth,
+    longestLineWidth
+  };
+};
+
 const shouldUpdateDiagnosticData = (oldState, newState) => {
   return oldState.diagnostics !== newState.diagnostics || (newState.diagnostics?.length ?? 0) > 0 && (oldState.minLineY !== newState.minLineY || oldState.charWidth !== newState.charWidth || oldState.fontFamily !== newState.fontFamily || oldState.fontSize !== newState.fontSize || oldState.fontWeight !== newState.fontWeight || oldState.isMonospaceFont !== newState.isMonospaceFont || oldState.letterSpacing !== newState.letterSpacing || oldState.lines !== newState.lines || oldState.rowHeight !== newState.rowHeight || oldState.tabSize !== newState.tabSize || oldState.width !== newState.width);
 };
@@ -5154,10 +5430,10 @@ const shouldUpdateBracketMatchData = (oldState, newState) => {
 };
 const shouldUpdateLightBulb = (oldState, newState) => oldState.diagnostics !== newState.diagnostics || oldState.languageId !== newState.languageId || oldState.selections !== newState.selections || oldState.uri !== newState.uri;
 const shouldUpdateVisibleTextData = (oldState, newState) => {
-  if (oldState.textInfos !== newState.textInfos || oldState.differences !== newState.differences) {
+  if (oldState.deltaX === newState.deltaX && (oldState.textInfos !== newState.textInfos || oldState.differences !== newState.differences)) {
     return false;
   }
-  return oldState.lines !== newState.lines || oldState.tokenizerId !== newState.tokenizerId || oldState.minLineY !== newState.minLineY || oldState.maxLineY !== newState.maxLineY || oldState.visibleLineIndices !== newState.visibleLineIndices || oldState.visibleViewLineIndices !== newState.visibleViewLineIndices || oldState.decorations !== newState.decorations || oldState.embeds !== newState.embeds || oldState.deltaX !== newState.deltaX || oldState.width !== newState.width || oldState.highlightedLine !== newState.highlightedLine || oldState.foldingRanges !== newState.foldingRanges || oldState.debugEnabled !== newState.debugEnabled;
+  return oldState.lines !== newState.lines || oldState.tokenizerId !== newState.tokenizerId || oldState.minLineY !== newState.minLineY || oldState.maxLineY !== newState.maxLineY || oldState.visibleLineIndices !== newState.visibleLineIndices || oldState.visibleViewLineIndices !== newState.visibleViewLineIndices || oldState.decorations !== newState.decorations || oldState.embeds !== newState.embeds || oldState.deltaX !== newState.deltaX || oldState.width !== newState.width || oldState.charWidth !== newState.charWidth || oldState.tabSize !== newState.tabSize || oldState.horizontalVirtualizationThreshold !== newState.horizontalVirtualizationThreshold || oldState.fontFamily !== newState.fontFamily || oldState.fontSize !== newState.fontSize || oldState.fontWeight !== newState.fontWeight || oldState.letterSpacing !== newState.letterSpacing || oldState.isMonospaceFont !== newState.isMonospaceFont || oldState.highlightedLine !== newState.highlightedLine || oldState.foldingRanges !== newState.foldingRanges || oldState.debugEnabled !== newState.debugEnabled;
 };
 const shouldUpdateMinimapData = (oldState, newState) => {
   return newState.minimapEnabled && (!oldState.minimapEnabled || oldState.lines !== newState.lines || oldState.tokenizerId !== newState.tokenizerId);
@@ -5174,7 +5450,8 @@ const mergeConflictsEqual$1 = (oldState, newState) => {
   });
 };
 const updateDerivedState = async (oldState, newState) => {
-  const layoutState = oldState.lines !== newState.lines && 'foldingRanges' in newState ? updateLayout(newState, []) : newState;
+  const horizontalState = oldState.initial || oldState.lines !== newState.lines || oldState.width !== newState.width || oldState.charWidth !== newState.charWidth || oldState.fontFamily !== newState.fontFamily || oldState.fontSize !== newState.fontSize || oldState.fontWeight !== newState.fontWeight || oldState.isMonospaceFont !== newState.isMonospaceFont || oldState.letterSpacing !== newState.letterSpacing || oldState.tabSize !== newState.tabSize || oldState.lineNumbers !== newState.lineNumbers || oldState.breakPoints !== newState.breakPoints || oldState.gutterDecorations !== newState.gutterDecorations || oldState.lightBulbRowIndex !== newState.lightBulbRowIndex ? await updateHorizontalLayout(newState) : newState;
+  const layoutState = oldState.lines !== newState.lines && 'foldingRanges' in newState ? updateLayout(horizontalState, []) : horizontalState;
   const nextState = mergeConflictsEqual$1(oldState, layoutState) ? layoutState : {
     ...layoutState,
     incrementalEdits: emptyIncrementalEdits
@@ -5186,15 +5463,17 @@ const updateDerivedState = async (oldState, newState) => {
       documentSymbols: await getDocumentSymbols(nextState)
     };
   }
-  if (shouldUpdateVisibleTextData(oldState, nextState)) {
+  if (newState.deltaX !== nextState.deltaX || newState.gutterWidth !== nextState.gutterWidth || shouldUpdateVisibleTextData(oldState, nextState)) {
     const syncIncremental = getEnabled();
     const {
       differences,
+      horizontalVisibleRanges,
       textInfos
     } = await getVisible$1(nextState, syncIncremental);
     finalState = {
       ...finalState,
       differences,
+      horizontalVisibleRanges,
       textInfos
     };
   }
@@ -5907,7 +6186,7 @@ const isEqual$5 = (oldState, newState) => {
 };
 
 const isEqual$4 = (oldState, newState) => {
-  return oldState.rowHeight === newState.rowHeight && oldState.deltaY === newState.deltaY && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.deltaX === newState.deltaX && oldState.longestLineWidth === newState.longestLineWidth && oldState.minimumSliderSize === newState.minimumSliderSize && oldState.width === newState.width && oldState.scrollBarHeight === newState.scrollBarHeight;
+  return oldState.rowHeight === newState.rowHeight && oldState.deltaY === newState.deltaY && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.deltaX === newState.deltaX && oldState.gutterWidth === newState.gutterWidth && oldState.longestLineWidth === newState.longestLineWidth && oldState.minimumSliderSize === newState.minimumSliderSize && oldState.width === newState.width && oldState.scrollBarHeight === newState.scrollBarHeight;
 };
 
 const isEqual$3 = (oldState, newState) => {
@@ -5924,7 +6203,7 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState.breadcrumbFileIcon === newState.breadcrumbFileIcon && oldState.breadcrumbsEnabled === newState.breadcrumbsEnabled && oldState.breakPoints === newState.breakPoints && oldState.bracketMatchInfos === newState.bracketMatchInfos && oldState.cursorInfos === newState.cursorInfos && oldState.diagnostics === newState.diagnostics && oldState.documentSymbols === newState.documentSymbols && oldState.endOfLineDecorations === newState.endOfLineDecorations && oldState.focused === newState.focused && oldState.gutterDecorations === newState.gutterDecorations && oldState.highlightActiveLineNumber === newState.highlightActiveLineNumber && oldState.highlightedLine === newState.highlightedLine && oldState.problemsHighlightedRow === newState.problemsHighlightedRow && oldState.lineNumbers === newState.lineNumbers && oldState.loadError === newState.loadError && oldState.textInfos === newState.textInfos && oldState.visibleViewLineIndices === newState.visibleViewLineIndices && oldState.differences === newState.differences && oldState.initial === newState.initial && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.width === newState.width && oldState.longestLineWidth === newState.longestLineWidth && oldState.minimumSliderSize === newState.minimumSliderSize && oldState.selectionInfos === newState.selectionInfos && oldState.selections === newState.selections && oldState.workspaceUri === newState.workspaceUri;
+  return oldState.breadcrumbFileIcon === newState.breadcrumbFileIcon && oldState.breadcrumbsEnabled === newState.breadcrumbsEnabled && oldState.breakPoints === newState.breakPoints && oldState.bracketMatchInfos === newState.bracketMatchInfos && oldState.cursorInfos === newState.cursorInfos && oldState.diagnostics === newState.diagnostics && oldState.documentSymbols === newState.documentSymbols && oldState.endOfLineDecorations === newState.endOfLineDecorations && oldState.focused === newState.focused && oldState.gutterDecorations === newState.gutterDecorations && oldState.highlightActiveLineNumber === newState.highlightActiveLineNumber && oldState.highlightedLine === newState.highlightedLine && oldState.problemsHighlightedRow === newState.problemsHighlightedRow && oldState.lineNumbers === newState.lineNumbers && oldState.loadError === newState.loadError && oldState.textInfos === newState.textInfos && oldState.visibleViewLineIndices === newState.visibleViewLineIndices && oldState.differences === newState.differences && oldState.initial === newState.initial && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.width === newState.width && oldState.gutterWidth === newState.gutterWidth && oldState.longestLineWidth === newState.longestLineWidth && oldState.minimumSliderSize === newState.minimumSliderSize && oldState.selectionInfos === newState.selectionInfos && oldState.selections === newState.selections && oldState.workspaceUri === newState.workspaceUri;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -7356,7 +7635,7 @@ const at = async (editor, eventX, eventY) => {
     };
   }
   const rowIndex = viewLineIndices ? getDocumentRowForVisualRow$1(visualRowIndex, viewLineIndices) : getDocumentRowForVisualRow(visualRowIndex, foldingRanges);
-  const relativeX = eventX - x - gutterWidth + deltaX;
+  const relativeX = Math.max(0, eventX - x - gutterWidth + deltaX);
   const clampedRowIndex = clamp(rowIndex, 0, lines.length - 1);
   const line = lines[clampedRowIndex];
   const columnIndex = await getAccurateColumnIndex(line, fontWeight, fontSize, fontFamily, letterSpacing, isMonospaceFont, charWidth, tabSize, relativeX);
@@ -7856,7 +8135,7 @@ const applyWorkspaceEdit = async (editor, changes) => {
       }
       continue;
     }
-    const text = await readFile(editor.applicationId, uri);
+    const text = await readFile$1(editor.applicationId, uri);
     const newText = applyEditsToText(text, edits);
     await invoke$9(editor.applicationId, 'FileSystem.writeFile', uri, newText);
   }
@@ -11262,56 +11541,25 @@ const handlePointerUp = async editor => {
   }
 };
 
-// @ts-ignore
-
-// @ts-ignore
-const getNewPercent$1 = (size, scrollBarSize, relativeX) => {
-  if (relativeX <= 0) {
-    return 0;
-  }
-  // if (relativeY <= editor.scrollBarHeight / 2) {
-  //   // clicked at top
-  //   return 0
-  // }
-  if (relativeX <= size - scrollBarSize / 2) {
-    // clicked in middle
-    return relativeX / (size - scrollBarSize);
-  }
-  // clicked at bottom
-  return 1;
-};
-
-// @ts-ignore
 const handleScrollBarHorizontalMove = (state, eventX) => {
   const {
     handleOffsetX,
     longestLineWidth,
+    minimumSliderSize
+  } = state;
+  const {
     width,
     x
-  } = state;
-  if (width > longestLineWidth) {
-    return {
-      ...state,
-      deltaX: 0,
-      scrollBarWidth: 0
-    };
-  }
-  const spaceRight = 20; // TODO make this configurable
-  const normalizedEventX = clamp(eventX, x, x + width);
-  const relativeX = normalizedEventX - x - handleOffsetX;
-  const scrollBarWidth = getScrollBarWidth(width, longestLineWidth);
-  const finalDeltaX = longestLineWidth - width + spaceRight;
-  const newPercent = getNewPercent$1(width, scrollBarWidth, relativeX);
-  const clampedPercent = clamp(newPercent, 0, 1);
-  const newDeltaX = clampedPercent * finalDeltaX;
+  } = getHorizontalScrollDimensions(state);
+  const scrollBarWidth = getScrollBarSize(width, longestLineWidth, minimumSliderSize);
+  const travel = width - scrollBarWidth;
+  const percent = travel > 0 ? clamp((eventX - x - handleOffsetX) / travel, 0, 1) : 0;
   return {
     ...state,
-    deltaX: newDeltaX
+    deltaX: percent * Math.max(0, longestLineWidth - width)
   };
 };
 
-// @ts-ignore
-
 // TODO duplicate code with vertical pointer down event listener
 
 // @ts-ignore
@@ -11320,12 +11568,15 @@ const handleScrollBarHorizontalPointerDown = (state, eventX) => {
   const {
     deltaX,
     longestLineWidth,
+    minimumSliderSize
+  } = state;
+  const {
     width,
     x
-  } = state;
+  } = getHorizontalScrollDimensions(state);
   const relativeX = eventX - x;
-  const scrollBarWidth = getScrollBarWidth(width, longestLineWidth);
-  const finalDeltaX = width - scrollBarWidth;
+  const scrollBarWidth = getScrollBarSize(width, longestLineWidth, minimumSliderSize);
+  const finalDeltaX = Math.max(0, longestLineWidth - width);
   const currentScrollBarX = getScrollBarOffset(deltaX, finalDeltaX, width, scrollBarWidth);
   const diff = relativeX - currentScrollBarX;
   if (diff >= 0 && diff < scrollBarWidth) {
@@ -11458,7 +11709,7 @@ const scrollByLines = (editor, lineCount) => {
 };
 
 // @ts-ignore
-const setDelta = (editor, deltaMode, eventDeltaX, eventDeltaY) => {
+const setDelta = async (editor, deltaMode, eventDeltaX, eventDeltaY) => {
   number(deltaMode);
   number(eventDeltaX);
   number(eventDeltaY);
@@ -11466,12 +11717,15 @@ const setDelta = (editor, deltaMode, eventDeltaX, eventDeltaY) => {
   const {
     deltaX
   } = editor;
+  const {
+    width
+  } = getHorizontalScrollDimensions(editor);
   if (eventDeltaX === 0) {
     return setDeltaY(editor, eventDeltaY);
   }
-  const newDeltaX = clamp(deltaX + eventDeltaX, 0, Infinity);
+  const newDeltaX = clamp(deltaX + eventDeltaX, 0, Math.max(0, editor.longestLineWidth - width));
   return {
-    ...setDeltaY(editor, eventDeltaY),
+    ...(await setDeltaY(editor, eventDeltaY)),
     deltaX: newDeltaX
   };
 };
@@ -16031,6 +16285,7 @@ const DEFAULT_HOVER_DELAY = 200;
 const DEFAULT_MESSAGE_DELAY = 3000;
 const MAX_MESSAGE_DELAY = 10_000;
 const DEFAULT_SELECTED_TEXT_OCCURRENCE_MATCHING = 'caseSensitive';
+const DEFAULT_HORIZONTAL_VIRTUALIZATION_THRESHOLD = 500;
 const getSelectedTextOccurrenceMatching = value => {
   return value === 'caseInsensitive' ? value : DEFAULT_SELECTED_TEXT_OCCURRENCE_MATCHING;
 };
@@ -16048,8 +16303,15 @@ const getMessageDelay = value => {
   }
   return delay;
 };
+const getHorizontalVirtualizationThreshold = value => {
+  const threshold = typeof value === 'number' ? value : Number(value);
+  if (!Number.isFinite(threshold) || threshold < 0 || threshold > 100_000) {
+    return DEFAULT_HORIZONTAL_VIRTUALIZATION_THRESHOLD;
+  }
+  return Math.floor(threshold);
+};
 const getEditorPreferences = async () => {
-  const [diagnosticsEnabled, fontFamily, fontSize, fontWeight, formatOnSave, hoverEnabled, hoverDelay, messageDelay, isAutoClosingBracketsEnabled$1, isAutoClosingQuotesEnabled$1, isAutoClosingTagsEnabled$1, isQuickSuggestionsEnabled$1, lineNumbers, highlightActiveLineNumber, rowHeight, tabSize, letterSpacing, completionTriggerCharacters, minimapEnabled, mergeConflictActionsEnabled, breadcrumbsEnabled, insertSpaces, dragAndDropEnabled, roundedSelection, combineWhitespaceTokens, selectedTextOccurrenceMatching] = await Promise.all([get$3('editor.diagnostics'), getFontFamily(), getFontSize(), getFontWeight(), get$3('editor.formatOnSave'), get$3('editor.hover'), get$3('editor.hoverDelay'), get$3('editor.messageDelay'), isAutoClosingBracketsEnabled(), isAutoClosingQuotesEnabled(), isAutoClosingTagsEnabled(), isQuickSuggestionsEnabled(), getLineNumbers(), getHighlightActiveLineNumber(), getRowHeight(), getTabSize(), getLetterSpacing(), getCompletionTriggerCharacters(), getMinimapEnabled(), getMergeConflictActionsEnabled(), get$3('breadcrumbs.enabled'), get$3('editor.insertSpaces'), get$3('editor.dragAndDrop'), get$3('editor.roundedSelection'), get$3('editor.combineWhitespaceTokens'), get$3('editor.selectedTextOccurrenceMatching')]);
+  const [diagnosticsEnabled, fontFamily, fontSize, fontWeight, formatOnSave, hoverEnabled, hoverDelay, horizontalVirtualizationThreshold, messageDelay, isAutoClosingBracketsEnabled$1, isAutoClosingQuotesEnabled$1, isAutoClosingTagsEnabled$1, isQuickSuggestionsEnabled$1, lineNumbers, highlightActiveLineNumber, rowHeight, tabSize, letterSpacing, completionTriggerCharacters, minimapEnabled, mergeConflictActionsEnabled, breadcrumbsEnabled, insertSpaces, dragAndDropEnabled, roundedSelection, combineWhitespaceTokens, selectedTextOccurrenceMatching] = await Promise.all([get$3('editor.diagnostics'), getFontFamily(), getFontSize(), getFontWeight(), get$3('editor.formatOnSave'), get$3('editor.hover'), get$3('editor.hoverDelay'), get$3('editor.horizontalVirtualizationThreshold'), get$3('editor.messageDelay'), isAutoClosingBracketsEnabled(), isAutoClosingQuotesEnabled(), isAutoClosingTagsEnabled(), isQuickSuggestionsEnabled(), getLineNumbers(), getHighlightActiveLineNumber(), getRowHeight(), getTabSize(), getLetterSpacing(), getCompletionTriggerCharacters(), getMinimapEnabled(), getMergeConflictActionsEnabled(), get$3('breadcrumbs.enabled'), get$3('editor.insertSpaces'), get$3('editor.dragAndDrop'), get$3('editor.roundedSelection'), get$3('editor.combineWhitespaceTokens'), get$3('editor.selectedTextOccurrenceMatching')]);
   return {
     breadcrumbsEnabled: breadcrumbsEnabled ?? false,
     combineWhitespaceTokens: combineWhitespaceTokens ?? true,
@@ -16061,6 +16323,7 @@ const getEditorPreferences = async () => {
     fontWeight,
     formatOnSave: formatOnSave ?? false,
     highlightActiveLineNumber,
+    horizontalVirtualizationThreshold: getHorizontalVirtualizationThreshold(horizontalVirtualizationThreshold),
     hoverDelay: getHoverDelay(hoverDelay),
     hoverEnabled: hoverEnabled ?? false,
     insertSpaces: insertSpaces ?? true,
@@ -16391,6 +16654,40 @@ const intialize = async (syntaxHighlightingEnabled, syncIncremental) => {
 };
 
 const largeFileContentLength = 10 * 1024 * 1024;
+const pendingFileReads = new Map();
+const readFile = (applicationId, uri, forceReload) => {
+  if (forceReload) {
+    return readFile$1(applicationId, uri);
+  }
+  let applicationReads = pendingFileReads.get(applicationId);
+  if (!applicationReads) {
+    applicationReads = new Map();
+    pendingFileReads.set(applicationId, applicationReads);
+  }
+  const pendingRead = applicationReads.get(uri);
+  if (pendingRead) {
+    return pendingRead;
+  }
+  let fileRead;
+  const removePendingRead = () => {
+    if (applicationReads?.get(uri) !== fileRead) {
+      return;
+    }
+    applicationReads.delete(uri);
+    if (applicationReads.size === 0) {
+      pendingFileReads.delete(applicationId);
+    }
+  };
+  fileRead = (async () => {
+    try {
+      return await readFile$1(applicationId, uri);
+    } finally {
+      removePendingRead();
+    }
+  })();
+  applicationReads.set(uri, fileRead);
+  return fileRead;
+};
 const getWorkspaceUri = async applicationId => {
   try {
     return await invoke$9(applicationId, 'Workspace.getPath');
@@ -16469,6 +16766,7 @@ const loadContent = async (state, savedState, largeFile = false, focus = true, f
     fontWeight,
     formatOnSave,
     highlightActiveLineNumber,
+    horizontalVirtualizationThreshold,
     hoverDelay,
     hoverEnabled,
     insertSpaces,
@@ -16507,6 +16805,7 @@ const loadContent = async (state, savedState, largeFile = false, focus = true, f
     fontWeight,
     formatOnSave,
     highlightActiveLineNumber,
+    horizontalVirtualizationThreshold,
     hoverDelay,
     hoverEnabled,
     insertSpaces,
@@ -16540,7 +16839,7 @@ const loadContent = async (state, savedState, largeFile = false, focus = true, f
   let endOfLine = existingEditor?.endOfLine || 'lf';
   try {
     if (!existingEditor) {
-      content = await readFile(state.applicationId, uri);
+      content = await readFile(state.applicationId, uri, forceReload);
       endOfLine = getEndOfLine(content);
       content = normalizeLineEndings(content);
     }
@@ -16582,7 +16881,7 @@ const loadContent = async (state, savedState, largeFile = false, focus = true, f
     endOfLine
   }, x, y, width, height, 9);
   const newEditor2 = setText$1(newEditor1, content);
-  let newEditor3 = newEditor2;
+  const newEditor3 = await updateHorizontalLayout(newEditor2);
 
   // Detect links and initialize decorations
   const linkDecorations = detectAllLinksAsDecorations(newEditor3);
@@ -16606,6 +16905,7 @@ const loadContent = async (state, savedState, largeFile = false, focus = true, f
   const syncIncremental = getEnabled();
   const {
     differences,
+    horizontalVisibleRanges,
     textInfos
   } = await getVisible$1(newEditor3WithBreadcrumbs, syncIncremental);
   const newEditor4 = {
@@ -16613,6 +16913,7 @@ const loadContent = async (state, savedState, largeFile = false, focus = true, f
     differences,
     focus: FocusEditorText$1,
     focused: focus,
+    horizontalVisibleRanges,
     textInfos
   };
   const completionsOnTypeRaw = await get$3('editor.completionsOnType');
@@ -16852,31 +17153,27 @@ ${editorSelector} .ScrollBarThumbHorizontal {
 `;
 };
 
-const getScrollBarLeft = (deltaX, longestLineWidth, width) => {
-  const scrollBarLeft = deltaX / longestLineWidth * width;
-  if (!Number.isFinite(scrollBarLeft)) {
-    return 0;
-  }
-  return scrollBarLeft;
-};
 const renderCss$1 = (oldState, newState) => {
   const {
     deltaX,
     deltaY,
     finalDeltaY,
+    gutterWidth,
     height,
     longestLineWidth,
     minimumSliderSize,
     rowHeight,
     scrollBarHeight,
-    uid,
-    width
+    uid
   } = newState;
+  const {
+    width
+  } = getHorizontalScrollDimensions(newState);
   const scrollBarTop = getScrollBarY(deltaY, finalDeltaY, height, scrollBarHeight);
   const scrollBarWidth = getScrollBarSize(width, longestLineWidth, minimumSliderSize);
-  const scrollBarLeft = getScrollBarLeft(deltaX, longestLineWidth, width);
+  const scrollBarLeft = getScrollBarOffset(deltaX, Math.max(0, longestLineWidth - width), width, scrollBarWidth);
   const css = getCss(uid, rowHeight, scrollBarHeight, scrollBarTop, scrollBarWidth, scrollBarLeft, deltaY);
-  return [SetCss$1, uid, css];
+  return [SetCss$1, uid, gutterWidth ? `${css}\n.Editor[data-uid="${uid}"] .Gutter { width: ${gutterWidth}px; }\n` : css];
 };
 
 const renderFocus$2 = (oldState, newState) => {
@@ -17163,13 +17460,18 @@ const mergeConflictActions = [{
   action: 'both',
   label: 'Accept Both Changes'
 }];
-const getUnnecessaryRanges = (diagnostics, rowIndex, textLength) => {
+const getUnnecessaryRanges = (diagnostics, rowIndex, textLength, visibleStartColumn, line, hasLine, tabSize) => {
+  const visibleStart = hasLine ? getHorizontalDisplayColumn(line, visibleStartColumn, tabSize) : visibleStartColumn;
   return diagnostics.filter(diagnostic => diagnostic.tags?.includes(DiagnosticTag.Unnecessary)).flatMap(diagnostic => {
     if (rowIndex < diagnostic.rowIndex || rowIndex > diagnostic.endRowIndex) {
       return [];
     }
-    const start = rowIndex === diagnostic.rowIndex ? diagnostic.columnIndex : 0;
-    const end = rowIndex === diagnostic.endRowIndex ? diagnostic.endColumnIndex : textLength;
+    const diagnosticStart = rowIndex === diagnostic.rowIndex ? diagnostic.columnIndex : 0;
+    const diagnosticEnd = rowIndex === diagnostic.endRowIndex ? diagnostic.endColumnIndex : line.length;
+    const startColumn = hasLine ? getHorizontalDisplayColumn(line, diagnosticStart, tabSize) : diagnosticStart;
+    const endColumn = hasLine ? getHorizontalDisplayColumn(line, diagnosticEnd, tabSize) : diagnosticEnd;
+    const start = Math.max(0, startColumn - visibleStart);
+    const end = Math.min(textLength, endColumn - visibleStart);
     return start < end ? [{
       end,
       start
@@ -17230,7 +17532,7 @@ const addMergeConflictActions = (dom, rowIndex) => {
     }, text(label));
   }
 };
-const getEditorRowsVirtualDom$1 = (textInfos, differences, lineNumbers = true, highlightedLine = -1, visibleLineIndices = [], endOfLineDecorations = [], visibleViewLineIndices = [], problemsHighlightedRow = -1, diagnostics = []) => {
+const getEditorRowsVirtualDom$1 = (textInfos, differences, lineNumbers = true, highlightedLine = -1, visibleLineIndices = [], endOfLineDecorations = [], visibleViewLineIndices = [], problemsHighlightedRow = -1, diagnostics = [], deltaX = 0, width = Infinity, charWidth = 1, tabSize = 2, lines = [], horizontalVirtualizationThreshold = 500, horizontalVisibleRanges = []) => {
   const dom = [];
   const actualViewRows = visibleViewLineIndices.length === 0 ? Array.from({
     length: textInfos.length
@@ -17244,12 +17546,14 @@ const getEditorRowsVirtualDom$1 = (textInfos, differences, lineNumbers = true, h
     const textInfo = textInfos[textInfoIndex];
     const difference = differences[textInfoIndex];
     const rowIndex = viewRow;
-    const rowDecorations = endOfLineDecorations.filter(decoration => decoration.rowIndex === rowIndex);
+    const line = lines[rowIndex] || '';
+    const visibleRange = horizontalVisibleRanges.find(range => range.rowIndex === rowIndex) || getHorizontalVisibleRange(line, deltaX, width, charWidth, tabSize, horizontalVirtualizationThreshold);
+    const rowDecorations = endOfLineDecorations.filter(decoration => decoration.rowIndex === rowIndex && (!lines[rowIndex] || visibleRange.end >= line.length));
     let rowTextLength = 0;
     for (let index = 0; index < textInfo.length; index += 2) {
       rowTextLength += textInfo[index].length;
     }
-    const tokenParts = getTokenParts(textInfo, getUnnecessaryRanges(diagnostics, rowIndex, rowTextLength));
+    const tokenParts = getTokenParts(textInfo, getUnnecessaryRanges(diagnostics, rowIndex, rowTextLength, visibleRange.start, line, lines[rowIndex] !== undefined, tabSize));
     let className = EditorRow;
     if (rowIndex === highlightedLine) {
       className = mergeClassNames(className, EditorRowHighlighted);
@@ -17281,8 +17585,8 @@ const getEditorRowsVirtualDom$1 = (textInfos, differences, lineNumbers = true, h
   return dom;
 };
 
-const getEditorRowsVirtualDom = (textInfos, differences, lineNumbers = true, highlightedLine = -1, visibleLineIndices = [], endOfLineDecorations = [], visibleViewLineIndices = [], problemsHighlightedRow = -1, unnecessaryDiagnostics = []) => {
-  const rowsDom = getEditorRowsVirtualDom$1(textInfos, differences, lineNumbers, highlightedLine, visibleLineIndices, endOfLineDecorations, visibleViewLineIndices, problemsHighlightedRow, unnecessaryDiagnostics);
+const getEditorRowsVirtualDom = (textInfos, differences, lineNumbers = true, highlightedLine = -1, visibleLineIndices = [], endOfLineDecorations = [], visibleViewLineIndices = [], problemsHighlightedRow = -1, unnecessaryDiagnostics = [], horizontalVisibleRanges = [], lines = [], tabSize = 2) => {
+  const rowsDom = getEditorRowsVirtualDom$1(textInfos, differences, lineNumbers, highlightedLine, visibleLineIndices, endOfLineDecorations, visibleViewLineIndices, problemsHighlightedRow, unnecessaryDiagnostics, 0, Infinity, 1, tabSize, lines, 500, horizontalVisibleRanges);
   return [{
     childCount: visibleViewLineIndices.length || textInfos.length,
     className: 'EditorRows',
@@ -17379,8 +17683,8 @@ const editorLayersNode = {
   className: 'EditorLayers',
   type: Div
 };
-const getEditorLayersVirtualDom = (selectionInfos, textInfos, differences, lineNumbers = true, highlightedLine = -1, cursorInfos = [], diagnostics = [], visibleLineIndices = [], endOfLineDecorations = [], bracketMatchInfos = [], focused = true, visibleViewLineIndices = [], problemsHighlightedRow = -1, roundedSelection = false, unnecessaryDiagnostics = []) => {
-  return [editorLayersNode, ...getEditorSelectionsVirtualDom(selectionInfos, focused, roundedSelection), ...getEditorRowsVirtualDom(textInfos, differences, lineNumbers, highlightedLine, visibleLineIndices, endOfLineDecorations, visibleViewLineIndices, problemsHighlightedRow, unnecessaryDiagnostics), ...getEditorCursorsVirtualDom(cursorInfos, focused), ...getEditorDiagnosticsVirtualDom(diagnostics, bracketMatchInfos)];
+const getEditorLayersVirtualDom = (selectionInfos, textInfos, differences, lineNumbers = true, highlightedLine = -1, cursorInfos = [], diagnostics = [], visibleLineIndices = [], endOfLineDecorations = [], bracketMatchInfos = [], focused = true, visibleViewLineIndices = [], problemsHighlightedRow = -1, roundedSelection = false, unnecessaryDiagnostics = [], horizontalVisibleRanges = [], lines = [], tabSize = 2) => {
+  return [editorLayersNode, ...getEditorSelectionsVirtualDom(selectionInfos, focused, roundedSelection), ...getEditorRowsVirtualDom(textInfos, differences, lineNumbers, highlightedLine, visibleLineIndices, endOfLineDecorations, visibleViewLineIndices, problemsHighlightedRow, unnecessaryDiagnostics, horizontalVisibleRanges, lines, tabSize), ...getEditorCursorsVirtualDom(cursorInfos, focused), ...getEditorDiagnosticsVirtualDom(diagnostics, bracketMatchInfos)];
 };
 
 const getEditorScrollBarDiagnosticsVirtualDom = scrollBarDiagnostics => {
@@ -17453,13 +17757,16 @@ const getEditorContentVirtualDom = ({
   endOfLineDecorations = [],
   focused = true,
   highlightedLine = -1,
+  horizontalVisibleRanges = [],
   lineNumbers = true,
+  lines = [],
   problemsHighlightedRow = -1,
   roundedSelection = false,
   scrollBarDiagnostics = [],
   scrollBarHeight = 0,
   scrollBarWidth = 0,
   selectionInfos = [],
+  tabSize = 2,
   textInfos,
   unnecessaryDiagnostics = [],
   visibleLineIndices = [],
@@ -17468,7 +17775,7 @@ const getEditorContentVirtualDom = ({
   return [{
     ...editorContentNode,
     className: breadcrumbsEnabled ? 'EditorContent EditorBreadcrumbsOffset' : 'EditorContent'
-  }, ...getEditorInputVirtualDom(), ...getEditorLayersVirtualDom(selectionInfos, textInfos, differences, lineNumbers, highlightedLine, cursorInfos, diagnostics, visibleLineIndices, endOfLineDecorations, bracketMatchInfos, focused, visibleViewLineIndices, problemsHighlightedRow, roundedSelection, unnecessaryDiagnostics), ...getEditorScrollBarDiagnosticsVirtualDom(scrollBarDiagnostics), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarWidth)];
+  }, ...getEditorInputVirtualDom(), ...getEditorLayersVirtualDom(selectionInfos, textInfos, differences, lineNumbers, highlightedLine, cursorInfos, diagnostics, visibleLineIndices, endOfLineDecorations, bracketMatchInfos, focused, visibleViewLineIndices, problemsHighlightedRow, roundedSelection, unnecessaryDiagnostics, horizontalVisibleRanges, lines, tabSize), ...getEditorScrollBarDiagnosticsVirtualDom(scrollBarDiagnostics), ...getScrollBarVirtualDom(scrollBarHeight, scrollBarWidth)];
 };
 
 const getGutterInfoVirtualDom = (gutterInfo, activeLineNumber) => {
@@ -17622,6 +17929,7 @@ const getEditorVirtualDom = ({
   gutterInfos = [],
   highlightActiveLineNumber = true,
   highlightedLine = -1,
+  horizontalVisibleRanges = [],
   lightBulbRowIndex = -1,
   lineNumbers = true,
   lines = [],
@@ -17638,6 +17946,7 @@ const getEditorVirtualDom = ({
   scrollBarWidth = 0,
   selectionInfos = [],
   selections = new Uint32Array(),
+  tabSize = 2,
   textInfos,
   uid,
   unnecessaryDiagnostics = [],
@@ -17690,13 +17999,16 @@ const getEditorVirtualDom = ({
     endOfLineDecorations,
     focused,
     highlightedLine,
+    horizontalVisibleRanges,
     lineNumbers,
+    lines,
     problemsHighlightedRow,
     roundedSelection,
     scrollBarDiagnostics,
     scrollBarHeight,
     scrollBarWidth,
     selectionInfos,
+    tabSize,
     textInfos: combineWhitespaceTokens$1 ? textInfos.map(combineWhitespaceTokens) : textInfos,
     unnecessaryDiagnostics,
     visibleLineIndices: visibleLineIndices || [],
@@ -17864,12 +18176,14 @@ const getDom = state => {
     longestLineWidth,
     minimumSliderSize,
     textInfos,
-    visualDecorations = [],
-    width
+    visualDecorations = []
   } = state;
   if (initial && textInfos.length === 0) {
     return [];
   }
+  const {
+    width
+  } = getHorizontalScrollDimensions(state);
   return getEditorVirtualDom({
     ...state,
     diagnostics: visualDecorations,
@@ -18051,10 +18365,10 @@ const renderLines = {
       visibleLineIndices,
       visibleViewLineIndices
     } = newState;
-    const dom = getEditorRowsVirtualDom$1(textInfos, differences, true, highlightedLine, visibleLineIndices, endOfLineDecorations, visibleViewLineIndices, newState.problemsHighlightedRow, diagnostics || []);
+    const dom = getEditorRowsVirtualDom$1(textInfos, differences, true, highlightedLine, visibleLineIndices, endOfLineDecorations, visibleViewLineIndices, newState.problemsHighlightedRow, diagnostics || [], newState.deltaX, newState.width, newState.charWidth, newState.tabSize, newState.lines, newState.horizontalVirtualizationThreshold, newState.horizontalVisibleRanges);
     return [/* method */'setText', dom];
   },
-  isEqual: (oldState, newState) => oldState.lines === newState.lines && oldState.foldingRanges === newState.foldingRanges && oldState.visibleViewLineIndices === newState.visibleViewLineIndices && oldState.tokenizerId === newState.tokenizerId && oldState.minLineY === newState.minLineY && oldState.decorations === newState.decorations && oldState.embeds === newState.embeds && oldState.endOfLineDecorations === newState.endOfLineDecorations && oldState.diagnostics === newState.diagnostics && oldState.deltaX === newState.deltaX && oldState.width === newState.width && oldState.highlightedLine === newState.highlightedLine && oldState.problemsHighlightedRow === newState.problemsHighlightedRow && oldState.debugEnabled === newState.debugEnabled
+  isEqual: (oldState, newState) => oldState.lines === newState.lines && oldState.foldingRanges === newState.foldingRanges && oldState.visibleViewLineIndices === newState.visibleViewLineIndices && oldState.tokenizerId === newState.tokenizerId && oldState.minLineY === newState.minLineY && oldState.decorations === newState.decorations && oldState.embeds === newState.embeds && oldState.endOfLineDecorations === newState.endOfLineDecorations && oldState.diagnostics === newState.diagnostics && oldState.deltaX === newState.deltaX && oldState.charWidth === newState.charWidth && oldState.tabSize === newState.tabSize && oldState.gutterWidth === newState.gutterWidth && oldState.horizontalVirtualizationThreshold === newState.horizontalVirtualizationThreshold && oldState.fontFamily === newState.fontFamily && oldState.fontSize === newState.fontSize && oldState.fontWeight === newState.fontWeight && oldState.letterSpacing === newState.letterSpacing && oldState.isMonospaceFont === newState.isMonospaceFont && oldState.width === newState.width && oldState.highlightedLine === newState.highlightedLine && oldState.problemsHighlightedRow === newState.problemsHighlightedRow && oldState.debugEnabled === newState.debugEnabled
 };
 const renderSelections = {
   apply: (oldState, newState) => {

package/dist/settings.json

@@ -791,6 +791,16 @@
     "minimum": 0,
     "maximum": 10000
   },
+  {
+    "category": "text-editor",
+    "description": "Controls the minimum line length in characters before horizontal virtualization is enabled",
+    "heading": "Horizontal Virtualization Threshold",
+    "id": "editor.horizontalVirtualizationThreshold",
+    "type": "number",
+    "value": 500,
+    "minimum": 0,
+    "maximum": 100000
+  },
   {
     "category": "text-editor",
     "description": "Controls how long editor messages remain visible, in milliseconds",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/editor-worker",
-  "version": "19.71.6",
+  "version": "19.72.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:lvce-editor/editor-worker.git"