@yuhufe/wtool-vdiff 0.0.7 → 0.0.8

package/src/DiffFiles/createDiffFiles.ts

@@ -0,0 +1,70 @@
+import { defineCustomElement } from 'vue'
+import type { WtoolDiffFilesProps } from '../types'
+import DiffFiles from './DiffFiles.vue'
+import type { DiffFileSelection } from './FileExplore/fileTree'
+
+export type DiffFilesProps = WtoolDiffFilesProps
+export type DiffFilesSelectFileListener = (selection: DiffFileSelection) => void
+
+export const WTOOL_DIFF_FILES_TAG = 'wtool-diff-files'
+
+export const WtoolDiffFiles = defineCustomElement(DiffFiles, {
+  shadowRoot: false,
+})
+
+export function register(tagName: string = WTOOL_DIFF_FILES_TAG): void {
+  if (customElements.get(tagName)) return
+  customElements.define(tagName, WtoolDiffFiles)
+}
+
+export interface DiffFilesInstance {
+  update(props: Partial<DiffFilesProps>): void
+  onSelectFile(listener: DiffFilesSelectFileListener): () => void
+  destroy(): void
+}
+
+function applyProps(el: InstanceType<typeof WtoolDiffFiles>, props: Partial<DiffFilesProps>): void {
+  const node = el as unknown as Record<string, unknown>
+  for (const key of Object.keys(props) as (keyof DiffFilesProps)[]) {
+    const value = props[key]
+    if (value !== undefined) {
+      node[key as string] = value
+    }
+  }
+}
+
+export function createDiffFiles(target: HTMLElement, initialProps: DiffFilesProps = {}): DiffFilesInstance {
+  register()
+  const el = new WtoolDiffFiles()
+  const selectFileListeners = new Set<EventListener>()
+
+  applyProps(el, initialProps)
+  target.appendChild(el)
+
+  return {
+    update(newProps: Partial<DiffFilesProps>) {
+      applyProps(el, newProps)
+    },
+    onSelectFile(listener: DiffFilesSelectFileListener) {
+      const eventListener: EventListener = event => {
+        const [selection] = (event as CustomEvent<[DiffFileSelection]>).detail
+        listener(selection)
+      }
+
+      selectFileListeners.add(eventListener)
+      el.addEventListener('select-file', eventListener)
+
+      return () => {
+        selectFileListeners.delete(eventListener)
+        el.removeEventListener('select-file', eventListener)
+      }
+    },
+    destroy() {
+      selectFileListeners.forEach(listener => {
+        el.removeEventListener('select-file', listener)
+      })
+      selectFileListeners.clear()
+      el.remove()
+    },
+  }
+}

package/src/DiffFiles/index.ts

@@ -0,0 +1,11 @@
+export {
+  WTOOL_DIFF_FILES_TAG,
+  WtoolDiffFiles,
+  register as registerDiffFiles,
+  createDiffFiles,
+  type DiffFilesProps,
+  type DiffFilesInstance,
+  type DiffFilesSelectFileListener,
+} from './createDiffFiles'
+export type { DiffFileSelection } from './FileExplore/fileTree'
+export type { DiffFile, FileTree, WtoolDiffFilesProps, WtoolDiffViewerStyle } from '../types'

package/src/DiffFiles/types.ts

@@ -0,0 +1,15 @@
+import type { DiffFile } from '../types'
+
+// 文件列表的每个文件类型
+export interface FileItem extends DiffFile {
+  fullPath: string
+  name: string
+  folderPath: string
+  type?: string
+}
+
+export interface DiffFileState {
+  height: number
+  viewed: boolean
+  rawed: boolean
+}

package/src/DiffFiles/useDiffFiles.ts

@@ -0,0 +1,56 @@
+import { useCompExp } from '@yuhufe/web-ui'
+import type { Ref } from 'vue'
+
+import { DiffFile } from '@/types'
+import { parsePatchFilenames } from '@/utils/patch'
+import type { FileItem } from './types'
+
+export const useDiffFiles = function ({ isMaster = false } = {}) {
+  const exp = useCompExp<{
+    selectedFileKey: Ref<string>
+    searchKeyword: Ref<string>
+    selectFile: (fullPath: string) => Promise<void>
+    filterTree: (keyword: string) => void
+  }>({ isMaster, key: 'diffFiles' })
+
+  return { ...exp }
+}
+
+export function formatDiffFiles(diffFiles: DiffFile[]) {
+  function resolveDiffFileFullPath(file: DiffFile): string {
+    if (file.fullPath) return file.fullPath
+
+    if (file.diffPair) {
+      return file.diffPair[1]?.filename || file.diffPair[0]?.filename
+    }
+
+    if (typeof file.diffPatch === 'string') {
+      return parsePatchFilenames(file.diffPatch).modFilename
+    }
+
+    return ''
+  }
+  const files = diffFiles.map<FileItem>((file, index) => {
+    const fullPath = resolveDiffFileFullPath(file)
+
+    const pathSegments = fullPath.split('/')
+    const name = pathSegments.at(-1) || ''
+    const extname = name.split('.').at(-1)
+
+    return {
+      ...file,
+      fullPath,
+      name,
+      folderPath: pathSegments.slice(0, -1).join('/'),
+      type: extname?.toLowerCase(),
+    }
+  })
+
+  files.sort((left, right) => {
+    if (left.fullPath === right.fullPath) return 0
+    return left.fullPath > right.fullPath ? 1 : -1
+  })
+
+  const fileMap: Record<string, FileItem> = Object.fromEntries(files.map(file => [file.fullPath, file]))
+  return { files, fileMap }
+}

package/src/DiffViewer/DiffViewer.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="diff-viewer-wrap" :style="viewerStyle">
-    <TopBar class="top-bar" :diffPair="diffPair" />
+  <div class="diff-viewer-wrap" :style="viewerStyle" @viewStateChange="">
+    <TopBar class="top-bar" :diffPair="diffPair" :diffPatch="diffPatch" />
     <div class="content-wrap" v-show="!viewed" v-loading="loading">
       <MonacoDiffViewer
         class="monaco-container"
@@ -29,9 +29,12 @@ import { patch2Pair } from './utils/patch2Pair'
 import { autoHeight } from './utils/autoHeight'
 import { HEIGHT_TOP_BAR } from './const'
 
+const emit = defineEmits<{
+  viewStateChange: [data: { viewed: boolean; rawed: boolean }]
+}>()
+
 const vLoading = loadingDirective
 const loading = ref(true)
-const autoHeightId = v4()
 
 const _renderStart = performance.now()
 const onMonacoRenderComplete = async () => {
@@ -41,6 +44,7 @@ const onMonacoRenderComplete = async () => {
 }
 
 const props = withDefaults(defineProps<WtoolDiffViewerProps>(), {
+  fileId: '',
   diffPair: () => [],
   diffPatch: '',
   language: 'plaintext',
@@ -92,8 +96,8 @@ const mergedOptions = computed(() => {
   }
 })
 
-const viewed = ref<boolean>(false) // 是否已读
-const rawed = ref<boolean>(false) // 是否显示原始文件
+const viewed = ref<boolean>(props.viewerStyle?.viewed ?? false) // 是否已读
+const rawed = ref<boolean>(props.viewerStyle?.rawed ?? false) // 是否显示原始文件
 const canUnchangeVisible = ref(!props.diffPatch) // patch 模式下未改动区域为空行，不可展示
 
 // 编辑器样式
@@ -108,17 +112,19 @@ const viewerHeight = computed(() => {
     ...(props.viewerStyle || {}),
   }
 
+  const autoHeightId = props.fileId || v4()
   const height = autoHeight({
     id: autoHeightId,
     patch: props.diffPatch,
     pair: props.diffPair,
     ...heightRange,
     unchangedVisiable: funcs.rawed.value,
-    unchangedCtxLineNum: mergedOptions.value.hideUnchangedRegions.contextLineCount!,
+    unchangedCtxLineNum: mergedOptions.value.hideUnchangedRegions.contextLineCount ?? 3,
+    unchangedMinLineNum: mergedOptions.value.hideUnchangedRegions.minimumLineCount ?? 1,
   })
 
-  // 当前高度为代码高度，需要加上 topBar 高度才是完整高度
-  return `${height + HEIGHT_TOP_BAR}px`
+  // 当前高度为代码高度
+  return `${height}px`
 })
 const viewerStyle = computed(() => {
   return {
@@ -129,7 +135,15 @@ const viewerStyle = computed(() => {
 
 registerFunc({
   viewed,
+  updateViewed(newVal) {
+    viewed.value = newVal
+    emit('viewStateChange', { rawed: rawed.value, viewed: newVal })
+  },
   rawed,
+  updateRawed(newVal) {
+    rawed.value = newVal
+    emit('viewStateChange', { rawed: newVal, viewed: viewed.value })
+  },
   canUnchangeVisible,
 })
 </script>

package/src/DiffViewer/MonacoDiffViewer.vue

@@ -7,6 +7,7 @@ import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
 import loader from '@monaco-editor/loader'
 import type * as Monaco from 'monaco-editor'
 import { useDiffViewer } from './useDiffView'
+import { HEIGHT_CODE_LINE, HEIGHT_HORIZONTAL_SCROLLBAR } from './const'
 
 type DiffEditorOptions = Monaco.editor.IStandaloneDiffEditorConstructionOptions
 type ModelOptions = Monaco.editor.ITextModelUpdateOptions
@@ -58,15 +59,18 @@ onMounted(() => {
       renderSideBySide: true,
       useInlineViewWhenSpaceIsLimited: false,
       scrollBeyondLastLine: false,
+      lineHeight: HEIGHT_CODE_LINE,
       hideUnchangedRegions: {
         enabled: true,
         contextLineCount: 3,
       },
+      ...props.options,
       scrollbar: {
         verticalScrollbarSize: 8,
-        horizontalScrollbarSize: 8,
+        horizontalScrollbarSize: HEIGHT_HORIZONTAL_SCROLLBAR,
+        alwaysConsumeMouseWheel: false,
+        ...props.options.scrollbar,
       },
-      ...props.options,
     })
     editor.value.setModel({
       original: originalModel.value,
@@ -165,6 +169,21 @@ watch(
 </style>
 
 <style>
+/* Monaco tooltip 会挂载到独立的 context view 中，需使用非 scoped 样式避免遮挡工具按钮 */
+.context-view.monaco-component {
+  .workbench-hover-container {
+    .hover-contents {
+      white-space: nowrap !important;
+    }
+  }
+}
+
+.monaco-editor-container {
+  .codicon.codicon-widget-close {
+    box-sizing: content-box !important;
+  }
+}
+
 /* patch 模式：未改动区域为空行，隐藏 monaco 内置的展开未改动区域按钮（非 scoped，配合 JS class 控制） */
 .monaco-editor-container.hide-unchanged-actions {
   .diff-hidden-lines-widget {

package/src/DiffViewer/TopBar.vue

@@ -4,8 +4,8 @@
       <div class="filename">{{ filenameDisplay }}</div>
       <span :class="['diff-type-tag', diffType]">{{ diffTypeLabel }}</span>
       <div class="diff-line-num">
-        <div class="add" v-if="diffType !== 'del'">+{{ changed.added }}</div>
-        <div class="del" v-if="diffType !== 'add'">-{{ changed.removed }}</div>
+        <div class="add" v-if="diffType !== 'del'">+{{ displayedChanged.added }}</div>
+        <div class="del" v-if="diffType !== 'add'">-{{ displayedChanged.removed }}</div>
       </div>
     </div>
     <div class="toolbar">
@@ -25,15 +25,18 @@
 import { computed, ref, onMounted } from 'vue'
 import { useDiffViewer } from './useDiffView'
 import { HEIGHT_TOP_BAR } from './const'
+import { parsePatchHunks } from '@/utils/patch'
 
 const { funcs, registerFunc } = useDiffViewer()
 
 const props = withDefaults(
   defineProps<{
     diffPair?: { filename: string; content: string | null }[]
+    diffPatch?: string
   }>(),
   {
     diffPair: () => [],
+    diffPatch: '',
   }
 )
 
@@ -74,11 +77,11 @@ const filenameDisplay = computed(() => {
 const { viewed, rawed, canUnchangeVisible } = funcs
 const onViewedChange = function (evt) {
   const checked = (evt.target as HTMLInputElement).checked
-  viewed.value = checked
+  funcs.updateViewed(checked)
 }
 const onRawedChange = function (evt) {
   const checked = (evt.target as HTMLInputElement).checked
-  rawed.value = checked
+  funcs.updateRawed(checked)
 }
 
 onMounted(() => {
@@ -87,6 +90,22 @@ onMounted(() => {
 
 // 变更行数
 const changed = ref({ added: 0, removed: 0 })
+const patchChanged = computed(() => {
+  const result = { added: 0, removed: 0 }
+
+  for (const hunk of parsePatchHunks(props.diffPatch)) {
+    for (const line of hunk.lines) {
+      if (line.startsWith('+')) {
+        result.added++
+      } else if (line.startsWith('-')) {
+        result.removed++
+      }
+    }
+  }
+
+  return result
+})
+const displayedChanged = computed(() => (props.diffPatch ? patchChanged.value : changed.value))
 function updateChangedLines(newVal) {
   Object.assign(changed.value, newVal)
 }

package/src/DiffViewer/const.ts

@@ -1 +1,11 @@
+/** 顶部工具栏的固定高度，单位：像素。 */
 export const HEIGHT_TOP_BAR = 32
+
+/** Diff 编辑器中单行代码的默认高度，单位：像素。 */
+export const HEIGHT_CODE_LINE = 18
+
+/** 未变更代码折叠区域占用的固定高度，单位：像素。 */
+export const HEIGHT_HIDDEN_REGION = 24
+
+/** Diff 编辑器横向滚动条的默认高度，单位：像素。 */
+export const HEIGHT_HORIZONTAL_SCROLLBAR = 8

package/src/DiffViewer/utils/autoHeight.ts

@@ -1,16 +1,27 @@
 import { diffLines } from 'diff'
 import type { WtoolDiffViewerProps } from '@/types'
-import { parsePatchHunks } from '@/utils/patch'
+import { HEIGHT_CODE_LINE, HEIGHT_HIDDEN_REGION, HEIGHT_HORIZONTAL_SCROLLBAR } from '../const'
+import { patch2PairWithLayout } from './patch2Pair'
 
-const LINE_HEIGHT = 18
-const GAP_HEIGHT = 24
-const heightMap = new Map<string, Partial<Record<'visible' | 'hidden', number>>>()
+interface HeightCache {
+  patch?: string
+  origContent?: string | null
+  modContent?: string | null
+  minPx: number
+  maxPx: number
+  unchangedCtxLineNum: number
+  unchangedMinLineNum: number
+  heights: Partial<Record<'visible' | 'hidden', number>>
+}
+
+const heightMap = new Map<string, HeightCache>()
 
 interface CommonParams {
   minPx: number
   maxPx: number
   unchangedVisiable: boolean
   unchangedCtxLineNum: number
+  unchangedMinLineNum: number
 }
 
 interface ChangedLineBlock {
@@ -66,15 +77,17 @@ function getChangedLineInfo(origContent: string, modContent: string): ChangedLin
  * 区间必须按 start 升序喂入，每次 feed 后可读取 maxReached 判断是否达到像素上限。
  * @param totalLines 文件总行数，用于 clamp context 窗口上界及判断尾部是否有折叠 widget
  * @param ctx        每个变更块上下保留的 context 行数，对应 Monaco contextLineCount
+ * @param minHidden  Monaco minimumLineCount，小于此值的未变更区不折叠
  * @param maxPx      像素上限，达到后 maxReached 为 true，调用方应立即停止 feed
  */
-function makeVisibleLineCounter(totalLines: number, ctx: number, maxPx: number) {
+function makeVisibleLineCounter(totalLines: number, ctx: number, minHidden: number, maxPx: number) {
   let visible = 0 // 已 commit 的确定可见行数（不含当前 pending 块）
-  let gaps = 0 // gap widget 数量（每个折叠区域占 GAP_HEIGHT，非 LINE_HEIGHT）
+  let gaps = 0 // gap widget 数量（每个折叠区域占固定高度，非代码行高）
   let pendingStart = -1 // 当前待合并窗口的起始行（-1 表示无 pending）
   let pendingEnd = -1 // 当前待合并窗口的结束行
 
-  const usedPx = () => visible * LINE_HEIGHT + gaps * GAP_HEIGHT
+  const usedPx = () =>
+    visible * HEIGHT_CODE_LINE + gaps * HEIGHT_HIDDEN_REGION + HEIGHT_HORIZONTAL_SCROLLBAR
 
   const commitPending = () => {
     if (pendingStart === -1) return
@@ -86,9 +99,17 @@ function makeVisibleLineCounter(totalLines: number, ctx: number, maxPx: number)
 
   return {
     feed(s: number, e: number) {
-      const winStart = Math.max(1, s - ctx)
+      let winStart = Math.max(1, s - ctx)
       const winEnd = Math.min(totalLines, e + ctx)
-      if (pendingEnd === -1 || winStart > pendingEnd + 1) {
+      if (pendingEnd === -1) {
+        if (winStart - 1 < minHidden) winStart = 1
+        pendingStart = winStart
+        pendingEnd = winEnd
+        return
+      }
+
+      const hiddenLineCount = winStart - pendingEnd - 1
+      if (hiddenLineCount > 0 && hiddenLineCount >= minHidden) {
         commitPending() // 新窗口与 pending 有间隙：先提交 pending，再开新窗口
         pendingStart = winStart
         pendingEnd = winEnd
@@ -99,7 +120,14 @@ function makeVisibleLineCounter(totalLines: number, ctx: number, maxPx: number)
     flush() {
       const lastEnd = pendingEnd
       commitPending()
-      if (visible > 0 && lastEnd !== totalLines) gaps += 1
+      const trailingLineCount = totalLines - lastEnd
+      if (visible > 0 && trailingLineCount > 0) {
+        if (trailingLineCount >= minHidden) {
+          gaps += 1
+        } else {
+          visible += trailingLineCount
+        }
+      }
       return usedPx()
     },
     get usedPx() {
@@ -119,23 +147,20 @@ const autoHeightPatch = function ({
   minPx,
   maxPx,
   unchangedCtxLineNum,
+  unchangedMinLineNum,
 }: {
   patch: string
 } & CommonParams): number {
-  const hunks = parsePatchHunks(patch)
-  if (hunks.length === 0) return minPx
+  const { changedLineBlocks, totalLines } = patch2PairWithLayout(patch)
+  if (changedLineBlocks.length === 0) return minPx
 
-  const lastHunk = hunks[hunks.length - 1]
-  const totalLines = Math.max(lastHunk.origStart + lastHunk.origCount - 1, lastHunk.modStart + lastHunk.modCount - 1)
-  const counter = makeVisibleLineCounter(totalLines, unchangedCtxLineNum, maxPx)
-
-  for (const h of hunks) {
-    const hunkEnd = Math.max(h.origStart + h.origCount - 1, h.modStart + h.modCount - 1)
-    counter.feed(h.origStart, hunkEnd)
+  const counter = makeVisibleLineCounter(totalLines, unchangedCtxLineNum, unchangedMinLineNum, maxPx)
+  for (const block of changedLineBlocks) {
+    counter.feed(block.start, block.end)
     if (counter.maxReached) return maxPx
   }
 
-  return Math.max(minPx, counter.flush())
+  return Math.min(maxPx, Math.max(minPx, counter.flush()))
 }
 
 const autoHeightPair = function ({
@@ -144,6 +169,7 @@ const autoHeightPair = function ({
   maxPx,
   unchangedVisiable,
   unchangedCtxLineNum,
+  unchangedMinLineNum,
 }: {
   pair: WtoolDiffViewerProps['diffPair']
 } & CommonParams): number {
@@ -156,13 +182,14 @@ const autoHeightPair = function ({
   const totalLines = Math.max(origLines.length, modLines.length)
 
   if (unchangedVisiable) {
-    return Math.max(minPx, Math.min(totalLines * LINE_HEIGHT, maxPx))
+    const contentHeight = totalLines * HEIGHT_CODE_LINE + HEIGHT_HORIZONTAL_SCROLLBAR
+    return Math.max(minPx, Math.min(contentHeight, maxPx))
   }
 
   const { blocks, totalLines: diffTotalLines } = getChangedLineInfo(origContent, modContent)
   if (blocks.length === 0) return minPx
 
-  const counter = makeVisibleLineCounter(diffTotalLines, unchangedCtxLineNum, maxPx)
+  const counter = makeVisibleLineCounter(diffTotalLines, unchangedCtxLineNum, unchangedMinLineNum, maxPx)
   for (const block of blocks) {
     counter.feed(block.start, block.end)
     if (counter.maxReached) return maxPx
@@ -175,7 +202,7 @@ const autoHeightPair = function ({
   return result
 }
 
-const height2Num = (heightStr: string): number => {
+export const height2Num = (heightStr: string): number => {
   if (heightStr.endsWith('vh')) {
     const vh = parseFloat(heightStr)
     return Math.round((vh / 100) * document.documentElement.clientHeight)
@@ -191,6 +218,7 @@ export const autoHeight = function ({
   minHeight,
   unchangedVisiable,
   unchangedCtxLineNum,
+  unchangedMinLineNum = 1,
 }: {
   id: string
   patch?: string
@@ -199,19 +227,45 @@ export const autoHeight = function ({
   minHeight: string
   unchangedVisiable: boolean
   unchangedCtxLineNum: number
+  unchangedMinLineNum?: number
 }): number {
   const cacheKey = unchangedVisiable ? 'visible' : 'hidden'
-  const cache = heightMap.get(id) || {}
-  const cachedHeight = cache?.[cacheKey]
+  const [minPx, maxPx] = [minHeight, maxHeight].map(height2Num)
+  const origContent = pair?.[0]?.content
+  const modContent = pair?.[1]?.content
+  const cache = heightMap.get(id)
+  const cacheMatched =
+    cache?.patch === patch &&
+    cache?.origContent === origContent &&
+    cache?.modContent === modContent &&
+    cache?.minPx === minPx &&
+    cache?.maxPx === maxPx &&
+    cache?.unchangedCtxLineNum === unchangedCtxLineNum &&
+    cache?.unchangedMinLineNum === unchangedMinLineNum
+  const cachedHeight = cacheMatched ? cache.heights[cacheKey] : undefined
   if (cachedHeight !== undefined) return cachedHeight
 
-  const [minPx, maxPx] = [minHeight, maxHeight].map(height2Num)
-  const commonParams: CommonParams = { minPx, maxPx, unchangedVisiable, unchangedCtxLineNum }
+  const commonParams: CommonParams = {
+    minPx,
+    maxPx,
+    unchangedVisiable,
+    unchangedCtxLineNum,
+    unchangedMinLineNum,
+  }
   const height = patch ? autoHeightPatch({ patch, ...commonParams }) : autoHeightPair({ pair, ...commonParams })
 
   heightMap.set(id, {
-    ...cache,
-    [cacheKey]: height,
+    patch,
+    origContent,
+    modContent,
+    minPx,
+    maxPx,
+    unchangedCtxLineNum,
+    unchangedMinLineNum,
+    heights: {
+      ...(cacheMatched ? cache.heights : {}),
+      [cacheKey]: height,
+    },
   })
 
   return height

package/src/DiffViewer/utils/patch2Pair.ts

@@ -5,6 +5,17 @@ export interface FilePair {
   content: string
 }
 
+export interface PatchChangedLineBlock {
+  start: number
+  end: number
+}
+
+export interface PatchPairLayout {
+  pair: FilePair[]
+  changedLineBlocks: PatchChangedLineBlock[]
+  totalLines: number
+}
+
 /**
  * 将 unified diff patch 转换为 [original, modified] 文件对。
  *
@@ -15,12 +26,16 @@ export interface FilePair {
  *   - 连续的删除（'-'）/ 新增（'+'）块：收集后成对对齐写入，
  *     行数较少的一侧补空行，使 Monaco 能在同一视觉行渲染替换关系
  */
-export const patch2Pair = function (patch: string): FilePair[] {
+export const patch2PairWithLayout = function (patch: string): PatchPairLayout {
   if (!patch) {
-    return [
-      { filename: '', content: '' },
-      { filename: '', content: '' },
-    ]
+    return {
+      pair: [
+        { filename: '', content: '' },
+        { filename: '', content: '' },
+      ],
+      changedLineBlocks: [],
+      totalLines: 1,
+    }
   }
 
   const { origFilename, modFilename } = parsePatchFilenames(patch)
@@ -28,12 +43,17 @@ export const patch2Pair = function (patch: string): FilePair[] {
 
   const origLines: string[] = []
   const modLines: string[] = []
+  const changedLineBlocks: PatchChangedLineBlock[] = []
 
   const pendingDel: string[] = []
   const pendingAdd: string[] = []
 
   const flushPending = () => {
     const maxLen = Math.max(pendingDel.length, pendingAdd.length)
+    if (maxLen > 0) {
+      const start = Math.max(origLines.length, modLines.length) + 1
+      changedLineBlocks.push({ start, end: start + maxLen - 1 })
+    }
     for (let i = 0; i < maxLen; i++) {
       origLines.push(pendingDel[i] ?? '')
       modLines.push(pendingAdd[i] ?? '')
@@ -78,8 +98,16 @@ export const patch2Pair = function (patch: string): FilePair[] {
     flushPending()
   }
 
-  return [
-    { filename: origFilename, content: origLines.join('\n') },
-    { filename: modFilename, content: modLines.join('\n') },
-  ]
+  return {
+    pair: [
+      { filename: origFilename, content: origLines.join('\n') },
+      { filename: modFilename, content: modLines.join('\n') },
+    ],
+    changedLineBlocks,
+    totalLines: Math.max(origLines.length, modLines.length),
+  }
+}
+
+export const patch2Pair = function (patch: string): FilePair[] {
+  return patch2PairWithLayout(patch).pair
 }

package/src/assets/file.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 3L13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2V3ZM19 9H20C20 8.73478 19.8946 8.48043 19.7071 8.29289L19 9ZM13.109 8.45399L14 8V8L13.109 8.45399ZM13.546 8.89101L14 8L13.546 8.89101ZM10 13C10 12.4477 9.55228 12 9 12C8.44772 12 8 12.4477 8 13H10ZM8 16C8 16.5523 8.44772 17 9 17C9.55228 17 10 16.5523 10 16H8ZM8.5 9C7.94772 9 7.5 9.44772 7.5 10C7.5 10.5523 7.94772 11 8.5 11V9ZM9.5 11C10.0523 11 10.5 10.5523 10.5 10C10.5 9.44772 10.0523 9 9.5 9V11ZM8.5 6C7.94772 6 7.5 6.44772 7.5 7C7.5 7.55228 7.94772 8 8.5 8V6ZM9.5 8C10.0523 8 10.5 7.55228 10.5 7C10.5 6.44772 10.0523 6 9.5 6V8ZM17.908 20.782L17.454 19.891L17.454 19.891L17.908 20.782ZM18.782 19.908L19.673 20.362L18.782 19.908ZM5.21799 19.908L4.32698 20.362H4.32698L5.21799 19.908ZM6.09202 20.782L6.54601 19.891L6.54601 19.891L6.09202 20.782ZM6.09202 3.21799L5.63803 2.32698L5.63803 2.32698L6.09202 3.21799ZM5.21799 4.09202L4.32698 3.63803L4.32698 3.63803L5.21799 4.09202ZM12 3V7.4H14V3H12ZM14.6 10H19V8H14.6V10ZM12 7.4C12 7.66353 11.9992 7.92131 12.0169 8.13823C12.0356 8.36682 12.0797 8.63656 12.218 8.90798L14 8C14.0293 8.05751 14.0189 8.08028 14.0103 7.97537C14.0008 7.85878 14 7.69653 14 7.4H12ZM14.6 8C14.3035 8 14.1412 7.99922 14.0246 7.9897C13.9197 7.98113 13.9425 7.9707 14 8L13.092 9.78201C13.3634 9.92031 13.6332 9.96438 13.8618 9.98305C14.0787 10.0008 14.3365 10 14.6 10V8ZM12.218 8.90798C12.4097 9.2843 12.7157 9.59027 13.092 9.78201L14 8V8L12.218 8.90798ZM8 13V16H10V13H8ZM8.5 11H9.5V9H8.5V11ZM8.5 8H9.5V6H8.5V8ZM13 2H8.2V4H13V2ZM4 6.2V17.8H6V6.2H4ZM8.2 22H15.8V20H8.2V22ZM20 17.8V9H18V17.8H20ZM19.7071 8.29289L13.7071 2.29289L12.2929 3.70711L18.2929 9.70711L19.7071 8.29289ZM15.8 22C16.3436 22 16.8114 22.0008 17.195 21.9694C17.5904 21.9371 17.9836 21.8658 18.362 21.673L17.454 19.891C17.4045 19.9162 17.3038 19.9539 17.0322 19.9761C16.7488 19.9992 16.3766 20 15.8 20V22ZM18 17.8C18 18.3766 17.9992 18.7488 17.9761 19.0322C17.9539 19.3038 17.9162 19.4045 17.891 19.454L19.673 20.362C19.8658 19.9836 19.9371 19.5904 19.9694 19.195C20.0008 18.8114 20 18.3436 20 17.8H18ZM18.362 21.673C18.9265 21.3854 19.3854 20.9265 19.673 20.362L17.891 19.454C17.7951 19.6422 17.6422 19.7951 17.454 19.891L18.362 21.673ZM4 17.8C4 18.3436 3.99922 18.8114 4.03057 19.195C4.06287 19.5904 4.13419 19.9836 4.32698 20.362L6.10899 19.454C6.0838 19.4045 6.04612 19.3038 6.02393 19.0322C6.00078 18.7488 6 18.3766 6 17.8H4ZM8.2 20C7.62345 20 7.25117 19.9992 6.96784 19.9761C6.69617 19.9539 6.59545 19.9162 6.54601 19.891L5.63803 21.673C6.01641 21.8658 6.40963 21.9371 6.80497 21.9694C7.18864 22.0008 7.65645 22 8.2 22V20ZM4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673L6.54601 19.891C6.35785 19.7951 6.20487 19.6422 6.10899 19.454L4.32698 20.362ZM8.2 2C7.65645 2 7.18864 1.99922 6.80497 2.03057C6.40963 2.06287 6.01641 2.13419 5.63803 2.32698L6.54601 4.10899C6.59545 4.0838 6.69617 4.04612 6.96784 4.02393C7.25117 4.00078 7.62345 4 8.2 4V2ZM6 6.2C6 5.62345 6.00078 5.25117 6.02393 4.96784C6.04612 4.69617 6.0838 4.59545 6.10899 4.54601L4.32698 3.63803C4.13419 4.01641 4.06287 4.40963 4.03057 4.80497C3.99922 5.18864 4 5.65645 4 6.2H6ZM5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803L6.10899 4.54601C6.20487 4.35785 6.35785 4.20487 6.54601 4.10899L5.63803 2.32698Z" fill="#000000"/>
+</svg>

package/src/assets/folder.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 1H6L9 4H16V14H0V1Z" fill="#54aeff"/>
+</svg>

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './DiffViewer'
+export * from './DiffFiles'
 export { default as loader } from '@monaco-editor/loader'