Spaces:

Meroar
/

filediff-viewer

Running

App Files Files Community

Meroar commited on Nov 3, 2025

Commit

52954c2

verified ·

1 Parent(s): c0fd883

Add a tool tip icon at the top of the page next to the sync scroll toggle that, when clicked, opens up a modal that explains how the diffs are determined and what the limitations are and potential flaws so that users know what to expect and how to use / understand it

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +178 -18
script.js +534 -0
style.css +235 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Filediff Viewer
-emoji: 👀
-colorFrom: red
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: FileDiff Viewer 🚀
+colorFrom: green
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,179 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>FileDiff Viewer</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header class="app-header">
+    <div class="brand">
+      <span class="logo">≋</span>
+      <h1>FileDiff Viewer</h1>
+    </div>
+    <div class="header-actions">
+      <label class="switch" title="Sync scrolling">
+        <input type="checkbox" id="syncScroll" checked />
+        <span class="slider"></span>
+        <span class="switch-label">Sync scroll</span>
+      </label>
+      <label class="switch" title="Ignore whitespace-only changes">
+        <input type="checkbox" id="ignoreWs" />
+        <span class="slider"></span>
+        <span class="switch-label">Ignore whitespace</span>
+      </label>
+    </div>
+  </header>
+  <section class="controls">
+    <div class="file-block" data-side="left">
+      <div class="block-header">
+        <strong>File A</strong>
+        <div class="file-actions">
+          <input type="file" id="fileLeft" accept=".txt,.js,.ts,.json,.md,.css,.html,.xml,.yml,.yaml,.csv,.ini,.py,.rb,.go,.java,.c,.h,.cpp,.cs,.sql" />
+          <button class="btn secondary" id="pasteLeftBtn" type="button">Paste</button>
+        </div>
+      </div>
+      <div class="textarea-wrap hidden" id="pasteLeftWrap">
+        <textarea id="textLeft" placeholder="Paste contents of File A here..." spellcheck="false"></textarea>
+        <div class="paste-actions">
+          <button class="btn" id="applyLeftText" type="button">Use Pasted A</button>
+          <button class="btn ghost" id="cancelLeftText" type="button">Cancel</button>
+        </div>
+      </div>
+      <div class="file-summary" id="leftSummary">No file selected.</div>
+    </div>
+    <div class="file-block" data-side="right">
+      <div class="block-header">
+        <strong>File B</strong>
+        <div class="file-actions">
+          <input type="file" id="fileRight" accept=".txt,.js,.ts,.json,.md,.css,.html,.xml,.yml,.yaml,.csv,.ini,.py,.rb,.go,.java,.c,.h,.cpp,.cs,.sql" />
+          <button class="btn secondary" id="pasteRightBtn" type="button">Paste</button>
+        </div>
+      </div>
+      <div class="textarea-wrap hidden" id="pasteRightWrap">
+        <textarea id="textRight" placeholder="Paste contents of File B here..." spellcheck="false"></textarea>
+        <div class="paste-actions">
+          <button class="btn" id="applyRightText" type="button">Use Pasted B</button>
+          <button class="btn ghost" id="cancelRightText" type="button">Cancel</button>
+        </div>
+      </div>
+      <div class="file-summary" id="rightSummary">No file selected.</div>
+    </div>
+  </section>
+  <section class="stats" id="stats" hidden>
+    <div class="stat">
+      <span class="label">Added</span>
+      <span class="value" id="statAdded">0</span>
+    </div>
+    <div class="stat">
+      <span class="label">Deleted</span>
+      <span class="value" id="statDeleted">0</span>
+    </div>
+    <div class="stat">
+      <span class="label">Modified</span>
+      <span class="value" id="statModified">0</span>
+    </div>
+    <div class="stat">
+      <span class="label">Moved</span>
+      <span class="value" id="statMoved">0</span>
+    </div>
+  </section>
+  <main class="diff-container">
+    <div class="pane" id="paneLeft" aria-label="File A">
+      <div class="pane-header">
+        <h2>File A</h2>
+        <span class="file-meta" id="metaLeft"></span>
+      </div>
+      <div class="code-wrap">
+        <table class="code">
+          <tbody id="tbodyLeft"></tbody>
+        </table>
+      </div>
+    </div>
+    <div class="pane" id="paneRight" aria-label="File B">
+      <div class="pane-header">
+        <h2>File B</h2>
+        <span class="file-meta" id="metaRight"></span>
+      </div>
+      <div class="code-wrap">
+        <table class="code">
+          <tbody id="tbodyRight"></tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+  <footer class="app-footer">
+    <small>Tip: Click the jump button next to a moved/modified line to focus its counterpart.</small>
+  </footer>
+  <!-- Modal -->
+  <div class="modal-overlay hidden" id="modalOverlay">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>How FileDiff Viewer Works</h3>
+        <button class="modal-close" id="modalClose" aria-label="Close modal">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"/>
+            <line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+      <div class="modal-content">
+        <div class="modal-section">
+          <h4>🔍 Algorithm Overview</h4>
+          <p>FileDiff Viewer uses a <strong>Longest Common Subsequence (LCS)</strong>-based algorithm to identify changes between two files:</p>
+          <ul>
+            <li><strong>Equal lines:</strong> Identical content (whitespace-aware if the ignore option is enabled)</li>
+            <li><strong>Modified lines:</strong> Similar but not identical content (detected using token similarity)</li>
+            <li><strong>Added lines:</strong> Lines present in File B but not in File A</li>
+            <li><strong>Deleted lines:</strong> Lines present in File A but not in File B</li>
+            <li><strong>Moved lines:</strong> Lines that are identical but appear in different positions</li>
+          </ul>
+        </div>
+        <div class="modal-section">
+          <h4>⚠️ Limitations & Known Issues</h4>
+          <ul>
+            <li><strong>Token similarity threshold:</strong> Modified lines are detected using a 55% similarity threshold, which may not always match human intuition</li>
+            <li><strong>Moved line detection:</strong> Only detects exact matches that aren't already classified as modifications</li>
+            <li><strong>Large files:</strong> Performance degrades with files larger than 5MB due to O(n²) complexity</li>
+            <li><strong>Context awareness:</strong> The algorithm works line-by-line without understanding code structure or semantics</li>
+            <li><strong>Whitespace handling:</strong> The "ignore whitespace" option only affects change detection, not the actual displayed content</li>
+          </ul>
+        </div>
+        <div class="modal-section">
+          <h4>💡 Best Practices</h4>
+          <ul>
+            <li>Use the <strong>Jump buttons (⟷)</strong> to quickly navigate between related changes</li>
+            <li>Enable <strong>Sync scroll</strong> for easier comparison of large diffs</li>
+            <li>For large files, consider using the <strong>ignore whitespace</strong> option to focus on meaningful changes</li>
+            <li>Review the statistics to get a quick overview of change types</li>
+          </ul>
+        </div>
+        <div class="modal-section">
+          <h4>🔧 Technical Details</h4>
+          <p>The algorithm combines LCS for exact matches with Jaccard similarity for modified line detection. Similarity is computed by comparing token sets between lines, providing a balance between accuracy and performance.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,534 @@

+// FileDiff Viewer - Line-by-line visual diff with moved lines and jump-to
+(() => {
+  // State
+  const state = {
+    files: {
+      left: { name: '', size: 0, text: '' },
+      right: { name: '', size: 0, text: '' },
+    },
+    options: {
+      ignoreWhitespace: false,
+      syncScroll: true,
+    },
+    result: null, // diff result
+    syncing: false,
+  };
+  // Elements
+  const els = {
+    // file inputs and paste
+    fileLeft: document.getElementById('fileLeft'),
+    fileRight: document.getElementById('fileRight'),
+    pasteLeftBtn: document.getElementById('pasteLeftBtn'),
+    pasteRightBtn: document.getElementById('pasteRightBtn'),
+    pasteLeftWrap: document.getElementById('pasteLeftWrap'),
+    pasteRightWrap: document.getElementById('pasteRightWrap'),
+    textLeft: document.getElementById('textLeft'),
+    textRight: document.getElementById('textRight'),
+    applyLeftText: document.getElementById('applyLeftText'),
+    applyRightText: document.getElementById('applyRightText'),
+    cancelLeftText: document.getElementById('cancelLeftText'),
+    cancelRightText: document.getElementById('cancelRightText'),
+    leftSummary: document.getElementById('leftSummary'),
+    rightSummary: document.getElementById('rightSummary'),
+    // options
+    ignoreWs: document.getElementById('ignoreWs'),
+    syncScroll: document.getElementById('syncScroll'),
+    // modal
+    infoBtn: document.getElementById('infoBtn'),
+    modalOverlay: document.getElementById('modalOverlay'),
+    modalClose: document.getElementById('modalClose'),
+    // meta
+    metaLeft: document.getElementById('metaLeft'),
+    metaRight: document.getElementById('metaRight'),
+    // panes and bodies
+    paneLeft: document.getElementById('paneLeft'),
+    paneRight: document.getElementById('paneRight'),
+    tbodyLeft: document.getElementById('tbodyLeft'),
+    tbodyRight: document.getElementById('tbodyRight'),
+    // stats
+    statsWrap: document.getElementById('stats'),
+    statAdded: document.getElementById('statAdded'),
+    statDeleted: document.getElementById('statDeleted'),
+    statModified: document.getElementById('statModified'),
+    statMoved: document.getElementById('statMoved'),
+  };
+// Utilities
+  const MAX_SIZE_BYTES = 5 * 1024 * 1024; // 5 MB safety limit
+  const byId = (id) => document.getElementById(id);
+  const escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  const normalize = (s) => s.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+  const trimWs = (s) => s.trim();
+  const isBlank = (s) => s.length === 0;
+  const fileSizeHuman = (n) => {
+    if (n < 1024) return `${n} B`;
+    if (n < 1024*1024) return `${(n/1024).toFixed(1)} KB`;
+    return `${(n/1024/1024).toFixed(1)} MB`;
+  };
+  function similarity(a, b) {
+    // Jaccard similarity over tokens (naive but useful)
+    const ta = (a.trim().match(/\S+/g) || []);
+    const tb = (b.trim().match(/\S+/g) || []);
+    const sa = new Set(ta);
+    const sb = new Set(tb);
+    let inter = 0;
+    for (const t of sa) if (sb.has(t)) inter++;
+    const union = new Set([...ta, ...tb]).size || 1;
+    return inter / union;
+  }
+  // Diff engine
+  function lcsMatrix(a, b) {
+    const n = a.length, m = b.length;
+    const dp = Array(n + 1);
+    for (let i = 0; i <= n; i++) dp[i] = new Array(m + 1).fill(0);
+    for (let i = n - 1; i >= 0; i--) {
+      for (let j = m - 1; j >= 0; j--) {
+        if (a[i] === b[j]) dp[i][j] = dp[i + 1][j + 1] + 1;
+        else dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    return dp;
+  }
+  function backtrackLCS(dp, a, b) {
+    const pairs = [];
+    let i = 0, j = 0;
+    while (i < a.length && j < b.length) {
+      if (a[i] === b[j]) {
+        pairs.push([i, j]);
+        i++; j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        i++;
+      } else {
+        j++;
+      }
+    }
+    return pairs; // array of [i, j] indices of equal lines
+  }
+  function findEqualRanges(pairs) {
+    if (!pairs.length) return [];
+    const ranges = [];
+    let startI = pairs[0][0], startJ = pairs[0][1], prevI = startI, prevJ = startJ;
+    for (let k = 1; k < pairs.length; k++) {
+      const [i, j] = pairs[k];
+      if (i === prevI + 1 && j === prevJ + 1) {
+        prevI = i; prevJ = j;
+      } else {
+        ranges.push([startI, prevI, startJ, prevJ]);
+        startI = i; startJ = j; prevI = i; prevJ = j;
+      }
+    }
+    ranges.push([startI, prevI, startJ, prevJ]);
+    return ranges;
+  }
+  function diffLines(textA, textB, ignoreWs) {
+    const A = normalize(textA).split('\n');
+    const B = normalize(textB).split('\n');
+    const a = ignoreWs ? A.map(trimWs) : A;
+    const b = ignoreWs ? B.map(trimWs) : B;
+    const dp = lcsMatrix(a, b);
+    const pairs = backtrackLCS(dp, a, b);
+    const ranges = findEqualRanges(pairs);
+    const aLen = a.length, bLen = b.length;
+    let ai = 0, bj = 0;
+    const aRes = [];
+    const bRes = [];
+    // Mapping for moved lines
+    const aToB = new Map(); // aIndex -> bIndex (for moved)
+    const bToA = new Map(); // bIndex -> aIndex (for moved)
+    function pushEqualRange(sI, eI, sJ, eJ) {
+      for (let k = 0; k <= eI - sI; k++) {
+        const i = sI + k, j = sJ + k;
+        aRes.push({ type: 'equal', aIndex: i, bIndex: null, aText: A[i], bText: null });
+        bRes.push({ type: 'equal', aIndex: null, bIndex: j, aText: null, bText: B[j] });
+      }
+      ai = eI + 1; bj = eJ + 1;
+    }
+    for (const [sI, eI, sJ, eJ] of ranges) {
+      // First, deletions/insertions/modifications between current ai..sI and bj..sJ
+      while (ai < sI && bj < sJ) {
+        const del = a[ai], ins = b[bj];
+        const sim = similarity(a[ai], b[bj]);
+        if (sim >= 0.55) {
+          // Modified pair
+          aRes.push({ type: 'modified', aIndex: ai, bIndex: bj, aText: A[ai], bText: null, partner: bj });
+          bRes.push({ type: 'modified', aIndex: ai, bIndex: bj, aText: null, bText: B[bj], partner: ai });
+          aToB.set(ai, bj);
+          bToA.set(bj, ai);
+          ai++; bj++;
+        } else {
+          aRes.push({ type: 'deleted', aIndex: ai, bIndex: null, aText: A[ai], bText: null });
+          bRes.push({ type: 'empty', aIndex: null, bIndex: null, aText: null, bText: null });
+          ai++;
+        }
+      }
+      while (ai < sI) {
+        aRes.push({ type: 'deleted', aIndex: ai, bIndex: null, aText: A[ai], bText: null });
+        bRes.push({ type: 'empty', aIndex: null, bIndex: null, aText: null, bText: null });
+        ai++;
+      }
+      while (bj < sJ) {
+        aRes.push({ type: 'empty', aIndex: null, bIndex: null, aText: null, bText: null });
+        bRes.push({ type: 'inserted', aIndex: null, bIndex: bj, aText: null, bText: B[bj] });
+        bj++;
+      }
+      // Now equal run
+      pushEqualRange(sI, eI, sJ, eJ);
+    }
+    // Tail
+    while (ai < aLen && bj < bLen) {
+      const sim = similarity(a[ai], b[bj]);
+      if (sim >= 0.55) {
+        aRes.push({ type: 'modified', aIndex: ai, bIndex: bj, aText: A[ai], bText: null, partner: bj });
+        bRes.push({ type: 'modified', aIndex: ai, bIndex: bj, aText: null, bText: B[bj], partner: ai });
+        aToB.set(ai, bj);
+        bToA.set(bj, ai);
+        ai++; bj++;
+      } else {
+        aRes.push({ type: 'deleted', aIndex: ai, bIndex: null, aText: A[ai], bText: null });
+        bRes.push({ type: 'empty', aIndex: null, bIndex: null, aText: null, bText: null });
+        ai++;
+      }
+    }
+    while (ai < aLen) {
+      aRes.push({ type: 'deleted', aIndex: ai, bIndex: null, aText: A[ai], bText: null });
+      bRes.push({ type: 'empty', aIndex: null, bIndex: null, aText: null, bText: null });
+      ai++;
+    }
+    while (bj < bLen) {
+      aRes.push({ type: 'empty', aIndex: null, bIndex: null, aText: null, bText: null });
+      bRes.push({ type: 'inserted', aIndex: null, bIndex: bj, aText: B[bj], bText: null });
+      bj++;
+    }
+    // Moved detection: single deleted lines whose partner is a single inserted line later
+    const aDelGroups = groupBy(aRes.filter(x => x.type === 'deleted'), (x) => x.aIndex);
+    const bInsGroups = groupBy(bRes.filter(x => x.type === 'inserted'), (x) => x.bIndex);
+    // Make reverse maps with indices
+    const aDeletedSet = new Set(aRes.filter(x => x.type === 'deleted').map(x => x.aIndex));
+    const bInsertedSet = new Set(bRes.filter(x => x.type === 'inserted').map(x => x.bIndex));
+    for (const [ai2, bj2] of aToB.entries()) {
+      // Already partners in modified; skip
+      continue;
+    }
+    // Consider unmatched singles by equality only
+    for (const ai2 of aDeletedSet) {
+      const bj2 = aToB.get(ai2);
+      if (bj2 != null && bInsertedSet.has(bj2)) {
+        // It could still be treated as moved if both are not in other relations
+        // We'll mark if they are exact equal (trim aware) and not already modified
+        const leftText = a[ai2];
+        const rightText = b[bj2];
+        if (leftText === rightText) {
+          // Tag both sides as moved and neutralize delete/insert
+          const aRow = aRes.find(x => x.aIndex === ai2 && x.type === 'deleted');
+          const bRow = bRes.find(x => x.bIndex === bj2 && x.type === 'inserted');
+          if (aRow && bRow) {
+            aRow.type = 'moved';
+            aRow.partner = bj2;
+            bRow.type = 'moved';
+            bRow.partner = ai2;
+          }
+        }
+      }
+    }
+    // Stats
+    const added = bRes.filter(x => x.type === 'inserted').length;
+    const deleted = aRes.filter(x => x.type === 'deleted').length;
+    const modified = aRes.filter(x => x.type === 'modified').length;
+    const moved = aRes.filter(x => x.type === 'moved').length;
+    return {
+      A, B,
+      aRes, bRes,
+      stats: { added, deleted, modified, moved }
+    };
+  }
+  function groupBy(arr, keyFn) {
+    const map = new Map();
+    for (const item of arr) {
+      const k = keyFn(item);
+      if (!map.has(k)) map.set(k, []);
+      map.get(k).push(item);
+    }
+    return map;
+  }
+  // Rendering
+  function renderDiff(result) {
+    const { aRes, bRes, A, B, stats } = result;
+    // Clear
+    els.tbodyLeft.innerHTML = '';
+    els.tbodyRight.innerHTML = '';
+    const fragLeft = document.createDocumentFragment();
+    const fragRight = document.createDocumentFragment();
+    for (let i = 0; i < aRes.length; i++) {
+      const ar = aRes[i];
+      const br = bRes[i];
+      const trL = document.createElement('tr');
+      trL.setAttribute('data-kind', ar.type);
+      trL.setAttribute('data-index', String(ar.aIndex ?? -1));
+      trL.id = ar.aIndex != null ? `L${ar.aIndex}` : `L-gap-${i}`;
+      const trR = document.createElement('tr');
+      trR.setAttribute('data-kind', br.type);
+      trR.setAttribute('data-index', String(br.bIndex ?? -1));
+      trR.id = br.bIndex != null ? `R${br.bIndex}` : `R-gap-${i}`;
+      // Line number cells
+      const tdNumL = document.createElement('td');
+      tdNumL.className = 'gutter';
+      tdNumL.textContent = ar.aIndex != null ? String(ar.aIndex + 1) : '';
+      const tdNumR = document.createElement('td');
+      tdNumR.className = 'gutter';
+      tdNumR.textContent = br.bIndex != null ? String(br.bIndex + 1) : '';
+      // Content cells
+      const tdContentL = document.createElement('td');
+      tdContentL.className = 'content';
+      tdContentL.classList.add('line');
+      tdContentL.classList.add(ar.type);
+      const tdContentR = document.createElement('td');
+      tdContentR.className = 'content';
+      tdContentR.classList.add('line');
+      tdContentR.classList.add(br.type);
+      // Prepare text
+      let leftText = '';
+      let rightText = '';
+      if (ar.type === 'equal') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'deleted') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'modified') leftText = A[ar.aIndex] ?? '';
+      else if (ar.type === 'moved') leftText = A[ar.aIndex] ?? '';
+      else leftText = '';
+      if (br.type === 'equal') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'inserted') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'modified') rightText = B[br.bIndex] ?? '';
+      else if (br.type === 'moved') rightText = B[br.bIndex] ?? '';
+      else rightText = '';
+      tdContentL.innerHTML = `${escapeHtml(leftText)}${renderActions(ar, 'left')}`;
+      tdContentR.innerHTML = `${escapeHtml(rightText)}${renderActions(br, 'right')}`;
+      trL.appendChild(tdNumL);
+      trL.appendChild(tdContentL);
+      trR.appendChild(tdNumR);
+      trR.appendChild(tdContentR);
+      fragLeft.appendChild(trL);
+      fragRight.appendChild(trR);
+    }
+    els.tbodyLeft.appendChild(fragLeft);
+    els.tbodyRight.appendChild(fragRight);
+    // Wire up actions
+    wireJumpButtons();
+    // Update stats
+    els.statsWrap.hidden = false;
+    els.statAdded.textContent = String(stats.added);
+    els.statDeleted.textContent = String(stats.deleted);
+    els.statModified.textContent = String(stats.modified);
+    els.statMoved.textContent = String(stats.moved);
+  }
+  function renderActions(row, side) {
+    // side: 'left' | 'right'
+    // Determine if a jump button is available
+    let partnerIndex = null;
+    if (row.type === 'moved' && row.partner != null) {
+      partnerIndex = row.partner;
+    } else if (row.type === 'modified' && row.partner != null) {
+      partnerIndex = row.partner;
+    }
+    if (partnerIndex == null) return '';
+    const targetId = side === 'left' ? `R${partnerIndex}` : `L${partnerIndex}`;
+    const label = side === 'left' ? 'Jump to B' : 'Jump to A';
+    return `<span class="actions"><button class="btn-jump" data-target="${targetId}" title="${label}" aria-label="${label}">⟷</button></span>`;
+  }
+  function wireJumpButtons() {
+    const buttons = document.querySelectorAll('.btn-jump');
+    buttons.forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const target = btn.getAttribute('data-target');
+        if (!target) return;
+        const el = document.getElementById(target);
+        if (!el) return;
+        el.classList.add('jump-indicator');
+        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        setTimeout(() => el.classList.remove('jump-indicator'), 900);
+      });
+    });
+  }
+  // Sync scrolling
+  function setupSyncScrolling() {
+    let last = 0;
+    els.paneLeft.addEventListener('scroll', () => {
+      if (!state.options.syncScroll || state.syncing) return;
+      state.syncing = true;
+      const ratio = els.paneLeft.scrollTop / Math.max(1, (els.paneLeft.scrollHeight - els.paneLeft.clientHeight));
+      const target = ratio * (els.paneRight.scrollHeight - els.paneRight.clientHeight);
+      els.paneRight.scrollTop = target;
+      setTimeout(() => state.syncing = false, 0);
+    });
+    els.paneRight.addEventListener('scroll', () => {
+      if (!state.options.syncScroll || state.syncing) return;
+      state.syncing = true;
+      const ratio = els.paneRight.scrollTop / Math.max(1, (els.paneRight.scrollHeight - els.paneRight.clientHeight));
+      const target = ratio * (els.paneLeft.scrollHeight - els.paneLeft.clientHeight);
+      els.paneLeft.scrollTop = target;
+      setTimeout(() => state.syncing = false, 0);
+    });
+  }
+  // Compute and render pipeline
+  function compute() {
+    const leftText = state.files.left.text || '';
+    const rightText = state.files.right.text || '';
+    // Guard: large content
+    if (leftText.length + rightText.length > 1_000_000) {
+      alert('Warning: Large content. Rendering may be slow.');
+    }
+    state.result = diffLines(leftText, rightText, state.options.ignoreWhitespace);
+    renderDiff(state.result);
+  }
+  // File loading helpers
+  async function handleFileInput(inputEl, side) {
+    const file = inputEl.files?.[0];
+    if (!file) return;
+    if (file.size > MAX_SIZE_BYTES) {
+      alert(`File "${file.name}" is too large (${fileSizeHuman(file.size)}). Max allowed is ${fileSizeHuman(MAX_SIZE_BYTES)}.`);
+      inputEl.value = '';
+      return;
+    }
+    try {
+      const text = await file.text();
+      state.files[side] = { name: file.name, size: file.size, text };
+      updateSummary(side);
+      compute();
+    } catch (err) {
+      console.error(err);
+      alert('Failed to read the selected file.');
+    }
+  }
+  function updateSummary(side) {
+    const data = state.files[side];
+    const sumEl = side === 'left' ? els.leftSummary : els.rightSummary;
+    if (!data.text) {
+      sumEl.textContent = 'No file selected.';
+    } else {
+      const lines = normalize(data.text).split('\n').length;
+      sumEl.textContent = `${data.name || '(pasted)'} • ${fileSizeHuman(data.size || data.text.length)} • ${lines} line${lines !== 1 ? 's' : ''}`;
+    }
+    const metaEl = side === 'left' ? els.metaLeft : els.metaRight;
+    metaEl.textContent = data.name ? data.name : '(pasted)';
+  }
+  // Paste panels
+  function togglePaste(side, show) {
+    const wrap = side === 'left' ? els.pasteLeftWrap : els.pasteRightWrap;
+    wrap.classList.toggle('hidden', !show);
+    const textarea = side === 'left' ? els.textLeft : els.textRight;
+    if (show) textarea.focus();
+  }
+  // Events
+  function wireEvents() {
+    // File inputs
+    els.fileLeft.addEventListener('change', () => handleFileInput(els.fileLeft, 'left'));
+    els.fileRight.addEventListener('change', () => handleFileInput(els.fileRight, 'right'));
+    // Paste buttons
+    els.pasteLeftBtn.addEventListener('click', () => togglePaste('left', true));
+    els.pasteRightBtn.addEventListener('click', () => togglePaste('right', true));
+    els.applyLeftText.addEventListener('click', () => {
+      const text = els.textLeft.value || '';
+      state.files.left = { name: '(pasted)', size: text.length, text };
+      els.textLeft.value = '';
+      togglePaste('left', false);
+      updateSummary('left');
+      compute();
+    });
+    els.applyRightText.addEventListener('click', () => {
+      const text = els.textRight.value || '';
+      state.files.right = { name: '(pasted)', size: text.length, text };
+      els.textRight.value = '';
+      togglePaste('right', false);
+      updateSummary('right');
+      compute();
+    });
+    els.cancelLeftText.addEventListener('click', () => {
+      els.textLeft.value = '';
+      togglePaste('left', false);
+    });
+    els.cancelRightText.addEventListener('click', () => {
+      els.textRight.value = '';
+      togglePaste('right', false);
+    });
+    // Options
+    els.ignoreWs.addEventListener('change', () => {
+      state.options.ignoreWhitespace = els.ignoreWs.checked;
+      if (state.files.left.text || state.files.right.text) compute();
+    });
+    els.syncScroll.addEventListener('change', () => {
+      state.options.syncScroll = els.syncScroll.checked;
+    });
+    // Initial syncing
+    setupSyncScrolling();
+  }
+  // Init
+  function init() {
+    wireEvents();
+    // Initial blank
+    updateSummary('left');
+    updateSummary('right');
+  }
+  document.addEventListener('DOMContentLoaded', init);
+})();

style.css CHANGED Viewed

@@ -1,28 +1,244 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root{
+  /* Theme colors - set to undefined to force external override, or keep defaults */
+  --color-primary: #0ea5e9;   /* sky-500 */
+  --color-primary-600: #0284c7;
+  --color-secondary: #64748b; /* slate-500 */
+  --color-bg: #ffffff;
+  --color-bg-soft: #f8fafc;   /* slate-50 */
+  --color-text: #0f172a;      /* slate-900 */
+  --color-muted: #475569;     /* slate-600 */
+  --color-border: #e2e8f0;    /* slate-200 */
+  --color-added-bg: #ecfdf5;  /* emerald-50 */
+  --color-del-bg: #fef2f2;    /* rose-50 */
+  --color-mod-bg: #fff7ed;    /* orange-50 */
+  --color-move-bg: #eff6ff;   /* blue-50 */
+  --color-added-border: #10b981;
+  --color-del-border: #ef4444;
+  --color-mod-border: #f59e0b;
+  --color-move-border: #3b82f6;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
+  --radius: 10px;
 }
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body{
+  margin:0;
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  color: var(--color-text);
+  background: var(--color-bg);
 }
+.app-header{
+  position: sticky; top: 0; z-index: 10;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
+  backdrop-filter: blur(4px);
 }
+.brand{ display: flex; align-items: center; gap: 10px; }
+.brand .logo{
+  width: 32px; height: 32px; display: grid; place-items:center;
+  border-radius: 8px; background: var(--color-primary);
+  color: white; font-weight: 700;
+  box-shadow: var(--shadow-sm);
 }
+h1{ font-size: 18px; margin: 0; }
+.header-actions{ display: flex; align-items: center; gap: 16px; }
+.btn-info{
+  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-border);
+  background: var(--color-bg); color: var(--color-muted); cursor: pointer; display: grid; place-items: center;
+  transition: background .2s ease, color .2s ease;
+}
+.btn-info:hover{ background: var(--color-primary); color: white; }
+.switch{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
+.switch input{ display: none; }
+.switch .slider{
+  width: 40px; height: 22px; border-radius: 999px; background: var(--color-border);
+  position: relative; transition: background .2s ease;
+}
+.switch .slider::after{
+  content:""; position: absolute; top: 3px; left: 3px;
+  width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: var(--shadow-sm);
+  transition: transform .2s ease;
+}
+.switch input:checked + .slider{ background: var(--color-primary); }
+.switch input:checked + .slider::after{ transform: translateX(18px); }
+.switch .switch-label{ color: var(--color-muted); font-size: 14px; }
+.controls{
+  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+  padding: 12px 16px;
+}
+.file-block{
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.block-header{
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-soft);
+}
+.file-actions{ display: flex; align-items: center; gap: 8px; }
+.btn{
+  background: var(--color-primary); color: white; border: none; border-radius: 8px;
+  padding: 8px 12px; cursor: pointer; box-shadow: var(--shadow-sm);
+  transition: transform .05s ease, background .2s ease;
+}
+.btn:hover{ background: var(--color-primary-600); }
+.btn:active{ transform: translateY(1px); }
+.btn.secondary{
+  background: var(--color-secondary);
+}
+.btn.ghost{
+  background: transparent; color: var(--color-text); border: 1px solid var(--color-border);
+}
+.file-summary{ padding: 8px 12px; color: var(--color-muted); font-size: 14px; }
+.textarea-wrap{ padding: 10px; border-top: 1px dashed var(--color-border); background: var(--color-bg-soft); }
+.textarea-wrap textarea{
+  width: 100%; min-height: 160px; resize: vertical; padding: 10px; border-radius: 8px;
+  border: 1px solid var(--color-border); background: white; color: var(--color-text);
+}
+.paste-actions{ display:flex; gap: 8px; margin-top: 8px; }
+.stats{
+  display: flex; gap: 16px; align-items: center;
+  padding: 8px 16px; color: var(--color-muted);
+}
+.stat{ display: inline-flex; gap: 6px; align-items: center; background: var(--color-bg-soft); border: 1px solid var(--color-border); padding: 6px 10px; border-radius: 999px; }
+.stat .label{ font-size: 12px; }
+.stat .value{ font-weight: 700; color: var(--color-text); }
+.diff-container{
+  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+  padding: 12px 16px 24px;
+}
+.pane{
+  display:flex; flex-direction: column; min-height: 60vh; border: 1px solid var(--color-border);
+  border-radius: var(--radius); overflow: hidden; background: var(--color-bg);
+  box-shadow: var(--shadow-sm);
+}
+.pane-header{
+  display:flex; align-items: baseline; justify-content: space-between; gap: 10px;
+  padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-soft);
+}
+.pane-header h2{ margin: 0; font-size: 16px; }
+.file-meta{ color: var(--color-muted); font-size: 12px; }
+.code-wrap{ overflow: auto; height: 100%; }
+table.code{ width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
+tbody tr{ border-bottom: 1px solid var(--color-border); }
+tbody tr:last-child{ border-bottom: none; }
+td{
+  padding: 6px 10px; vertical-align: top; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 13px; line-height: 1.45;
+}
+.gutter{ width: 64px; color: var(--color-muted); background: var(--color-bg); border-right: 1px solid var(--color-border); text-align: right; user-select: none; }
+.content{ white-space: pre-wrap; word-break: break-word; }
+.line.added{ background: var(--color-added-bg); }
+.line.added .content{ border-left: 3px solid var(--color-added-border); padding-left: 7px; }
+.line.deleted{ background: var(--color-del-bg); }
+.line.deleted .content{ border-left: 3px solid var(--color-del-border); padding-left: 7px; }
+.line.modified{ background: var(--color-mod-bg); }
+.line.modified .content{ border-left: 3px solid var(--color-mod-border); padding-left: 7px; }
+.line.moved{ background: var(--color-move-bg); }
+.line.moved .content{ border-left: 3px solid var(--color-move-border); padding-left: 7px; }
+.line.equal .content{ color: var(--color-text); }
+.line .actions{
+  display: inline-flex; gap: 6px; margin-left: 8px; opacity: 0; transition: opacity .15s ease;
+}
+tr:hover .line .actions{ opacity: 1; }
+.btn-jump{
+  border: none; background: transparent; color: var(--color-muted); cursor: pointer; padding: 2px 4px;
+  border-radius: 6px;
+}
+.btn-jump:hover{ color: var(--color-primary); background: rgba(14,165,233,0.08); }
+.jump-indicator{ color: var(--color-primary); font-weight: 700; }
+.app-footer{
+  padding: 12px 16px; border-top: 1px solid var(--color-border); color: var(--color-muted);
+  background: var(--color-bg-soft);
+}
+.hidden{ display: none !important; }
+/* Modal styles */
+.modal-overlay{
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
+  animation: fadeIn .2s ease;
+}
+.modal{
+  background: var(--color-bg); border-radius: 12px; border: 1px solid var(--color-border);
+  width: 90%; max-width: 640px; max-height: 80vh; overflow: hidden; box-shadow: var(--shadow-md);
+  animation: slideUp .2s ease;
+}
+.modal-header{
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 16px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-soft);
+}
+.modal-header h3{ margin: 0; font-size: 18px; }
+.modal-close{
+  border: none; background: transparent; cursor: pointer; color: var(--color-muted);
+  width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center;
+  transition: background .2s ease, color .2s ease;
+}
+.modal-close:hover{ background: var(--color-border); color: var(--color-text); }
+.modal-content{
+  padding: 20px; overflow-y: auto; max-height: calc(80vh - 70px);
+}
+.modal-section{
+  margin-bottom: 24px;
+}
+.modal-section:last-child{
+  margin-bottom: 0;
+}
+.modal-section h4{
+  margin: 0 0 10px 0; font-size: 16px; color: var(--color-text);
+}
+.modal-section p{
+  margin: 0 0 10px 0; line-height: 1.5; color: var(--color-muted);
+}
+.modal-section ul{
+  margin: 0; padding-left: 20px; color: var(--color-muted);
+}
+.modal-section li{
+  margin-bottom: 6px; line-height: 1.4;
+}
+.modal-section strong{
+  color: var(--color-text);
+}
+@media (max-width: 980px){
+  .controls{ grid-template-columns: 1fr; }
+  .diff-container{ grid-template-columns: 1fr; }
+  .modal{ width: 95%; max-height: 85vh; }
+}
+@keyframes fadeIn{
+  from{ opacity: 0; }
+  to{ opacity: 1; }
+}
+@keyframes slideUp{
+  from{ transform: translateY(20px); opacity: 0; }
+  to{ transform: translateY(0); opacity: 1; }
 }