@design.estate/dees-catalog 3.91.0 → 3.93.0

package/ts_web/elements/00group-dataview/dees-dataview-codebox/codebox.diff.ts

@@ -0,0 +1,401 @@
+/**
+ * Dependency-free line diffing for dees-dataview-codebox: LCS-based
+ * before/after comparison, unified-patch parsing, context folding, split
+ * pairing, and intraline (word-level) change detection. Pure data — no DOM.
+ */
+
+export type TDiffRowKind = 'context' | 'add' | 'remove' | 'hunk';
+
+export interface IDiffSegment {
+  text: string;
+  changed: boolean;
+}
+
+export interface IDiffRow {
+  kind: TDiffRowKind;
+  text: string;
+  /** 1-based line number on the before side (context/remove) */
+  oldLine?: number;
+  /** 1-based line number on the after side (context/add) */
+  newLine?: number;
+  /** intraline segments for paired single-line changes */
+  segments?: IDiffSegment[];
+}
+
+export interface IDiffFold {
+  kind: 'fold';
+  rows: IDiffRow[];
+  /** stable ordinal among folds; expansion state is keyed by this */
+  ordinal?: number;
+}
+
+export type TDiffDisplayRow = IDiffRow | IDiffFold;
+
+export interface ISplitCell {
+  kind: 'context' | 'add' | 'remove';
+  text: string;
+  line: number;
+  segments?: IDiffSegment[];
+}
+
+export interface ISplitRow {
+  kind: 'pair' | 'hunk';
+  text?: string;
+  left?: ISplitCell;
+  right?: ISplitCell;
+}
+
+export interface IDiffStats {
+  added: number;
+  removed: number;
+}
+
+const splitLines = (text: string): string[] => {
+  if (!text) return [];
+  const lines = text.split('\n');
+  if (lines.length && lines[lines.length - 1] === '') lines.pop();
+  return lines;
+};
+
+/** Cells beyond this budget fall back to a trimmed block-replace diff. */
+const maxLcsCells = 4_000_000;
+
+/**
+ * Line-level diff of two texts. Common prefix/suffix are trimmed first so
+ * the O(n*m) LCS table only covers the changed middle; oversized middles
+ * degrade gracefully to one remove-block + add-block.
+ */
+export const computeLineDiff = (beforeText: string, afterText: string): IDiffRow[] => {
+  const beforeLines = splitLines(beforeText);
+  const afterLines = splitLines(afterText);
+
+  let prefixLength = 0;
+  while (
+    prefixLength < beforeLines.length
+    && prefixLength < afterLines.length
+    && beforeLines[prefixLength] === afterLines[prefixLength]
+  ) {
+    prefixLength++;
+  }
+  let suffixLength = 0;
+  while (
+    suffixLength < beforeLines.length - prefixLength
+    && suffixLength < afterLines.length - prefixLength
+    && beforeLines[beforeLines.length - 1 - suffixLength] === afterLines[afterLines.length - 1 - suffixLength]
+  ) {
+    suffixLength++;
+  }
+
+  const beforeMiddle = beforeLines.slice(prefixLength, beforeLines.length - suffixLength);
+  const afterMiddle = afterLines.slice(prefixLength, afterLines.length - suffixLength);
+
+  const rows: IDiffRow[] = [];
+  for (let index = 0; index < prefixLength; index++) {
+    rows.push({ kind: 'context', text: beforeLines[index], oldLine: index + 1, newLine: index + 1 });
+  }
+
+  let oldLine = prefixLength + 1;
+  let newLine = prefixLength + 1;
+
+  const pushMiddle = (operations: Array<{ kind: 'context' | 'add' | 'remove'; text: string }>) => {
+    for (const operation of operations) {
+      if (operation.kind === 'context') {
+        rows.push({ kind: 'context', text: operation.text, oldLine: oldLine++, newLine: newLine++ });
+      } else if (operation.kind === 'remove') {
+        rows.push({ kind: 'remove', text: operation.text, oldLine: oldLine++ });
+      } else {
+        rows.push({ kind: 'add', text: operation.text, newLine: newLine++ });
+      }
+    }
+  };
+
+  if (beforeMiddle.length * afterMiddle.length > maxLcsCells) {
+    pushMiddle([
+      ...beforeMiddle.map((text) => ({ kind: 'remove' as const, text })),
+      ...afterMiddle.map((text) => ({ kind: 'add' as const, text })),
+    ]);
+  } else if (beforeMiddle.length || afterMiddle.length) {
+    // classic LCS table over the trimmed middle
+    const rowCount = beforeMiddle.length;
+    const columnCount = afterMiddle.length;
+    const table = new Uint32Array((rowCount + 1) * (columnCount + 1));
+    const cell = (row: number, column: number) => table[row * (columnCount + 1) + column];
+    for (let row = rowCount - 1; row >= 0; row--) {
+      for (let column = columnCount - 1; column >= 0; column--) {
+        table[row * (columnCount + 1) + column] = beforeMiddle[row] === afterMiddle[column]
+          ? cell(row + 1, column + 1) + 1
+          : Math.max(cell(row + 1, column), cell(row, column + 1));
+      }
+    }
+    const operations: Array<{ kind: 'context' | 'add' | 'remove'; text: string }> = [];
+    let row = 0;
+    let column = 0;
+    while (row < rowCount && column < columnCount) {
+      if (beforeMiddle[row] === afterMiddle[column]) {
+        operations.push({ kind: 'context', text: beforeMiddle[row] });
+        row++;
+        column++;
+      } else if (cell(row + 1, column) >= cell(row, column + 1)) {
+        operations.push({ kind: 'remove', text: beforeMiddle[row] });
+        row++;
+      } else {
+        operations.push({ kind: 'add', text: afterMiddle[column] });
+        column++;
+      }
+    }
+    while (row < rowCount) operations.push({ kind: 'remove', text: beforeMiddle[row++] });
+    while (column < columnCount) operations.push({ kind: 'add', text: afterMiddle[column++] });
+    pushMiddle(operations);
+  }
+
+  for (let index = 0; index < suffixLength; index++) {
+    rows.push({
+      kind: 'context',
+      text: beforeLines[beforeLines.length - suffixLength + index],
+      oldLine: oldLine++,
+      newLine: newLine++,
+    });
+  }
+
+  return annotateIntraline(rows);
+};
+
+/** Parses a unified diff/patch into rows (file headers skipped, hunks kept). */
+export const parseUnifiedDiff = (patchText: string): IDiffRow[] => {
+  const rows: IDiffRow[] = [];
+  let oldLine = 0;
+  let newLine = 0;
+  for (const line of patchText.split('\n')) {
+    if (
+      line.startsWith('diff ')
+      || line.startsWith('index ')
+      || line.startsWith('+++')
+      || line.startsWith('---')
+      || line.startsWith('\\ No newline')
+    ) {
+      continue;
+    }
+    const hunkMatch = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@(.*)$/.exec(line);
+    if (hunkMatch) {
+      oldLine = Number(hunkMatch[1]);
+      newLine = Number(hunkMatch[2]);
+      rows.push({ kind: 'hunk', text: line });
+      continue;
+    }
+    if (!oldLine && !newLine) continue; // outside any hunk
+    if (line.startsWith('+')) {
+      rows.push({ kind: 'add', text: line.slice(1), newLine: newLine++ });
+    } else if (line.startsWith('-')) {
+      rows.push({ kind: 'remove', text: line.slice(1), oldLine: oldLine++ });
+    } else {
+      rows.push({ kind: 'context', text: line.startsWith(' ') ? line.slice(1) : line, oldLine: oldLine++, newLine: newLine++ });
+    }
+  }
+  return annotateIntraline(rows);
+};
+
+const maxIntralineChars = 400;
+
+/**
+ * Word-level segments for balanced remove/add runs (the GitHub-style
+ * intraline tint). Only 1:1 paired lines within a run are annotated.
+ */
+const annotateIntraline = (rows: IDiffRow[]): IDiffRow[] => {
+  for (let index = 0; index < rows.length; index++) {
+    if (rows[index].kind !== 'remove') continue;
+    const removeStart = index;
+    let removeEnd = index;
+    while (removeEnd + 1 < rows.length && rows[removeEnd + 1].kind === 'remove') removeEnd++;
+    let addEnd = removeEnd;
+    while (addEnd + 1 < rows.length && rows[addEnd + 1].kind === 'add') addEnd++;
+    const removeCount = removeEnd - removeStart + 1;
+    const addCount = addEnd - removeEnd;
+    if (addCount === removeCount) {
+      for (let pairIndex = 0; pairIndex < removeCount; pairIndex++) {
+        const removeRow = rows[removeStart + pairIndex];
+        const addRow = rows[removeEnd + 1 + pairIndex];
+        if (removeRow.text.length <= maxIntralineChars && addRow.text.length <= maxIntralineChars) {
+          const [removeSegments, addSegments] = intralineSegments(removeRow.text, addRow.text);
+          removeRow.segments = removeSegments;
+          addRow.segments = addSegments;
+        }
+      }
+    }
+    index = addEnd;
+  }
+  return rows;
+};
+
+const tokenizeForIntraline = (text: string): string[] => {
+  return text.match(/(\s+|[A-Za-z0-9_]+|[^\sA-Za-z0-9_]+)/g) ?? [];
+};
+
+const intralineSegments = (beforeText: string, afterText: string): [IDiffSegment[], IDiffSegment[]] => {
+  const beforeTokens = tokenizeForIntraline(beforeText);
+  const afterTokens = tokenizeForIntraline(afterText);
+  let prefixLength = 0;
+  while (
+    prefixLength < beforeTokens.length
+    && prefixLength < afterTokens.length
+    && beforeTokens[prefixLength] === afterTokens[prefixLength]
+  ) {
+    prefixLength++;
+  }
+  let suffixLength = 0;
+  while (
+    suffixLength < beforeTokens.length - prefixLength
+    && suffixLength < afterTokens.length - prefixLength
+    && beforeTokens[beforeTokens.length - 1 - suffixLength] === afterTokens[afterTokens.length - 1 - suffixLength]
+  ) {
+    suffixLength++;
+  }
+  const buildSegments = (tokens: string[]): IDiffSegment[] => {
+    const prefix = tokens.slice(0, prefixLength).join('');
+    const middle = tokens.slice(prefixLength, tokens.length - suffixLength).join('');
+    const suffix = tokens.slice(tokens.length - suffixLength).join('');
+    const segments: IDiffSegment[] = [];
+    if (prefix) segments.push({ text: prefix, changed: false });
+    if (middle) segments.push({ text: middle, changed: true });
+    if (suffix) segments.push({ text: suffix, changed: false });
+    return segments.length ? segments : [{ text: tokens.join(''), changed: false }];
+  };
+  return [buildSegments(beforeTokens), buildSegments(afterTokens)];
+};
+
+/**
+ * Folds long unchanged context runs so large files read as a review diff:
+ * keeps `contextLines` around changes, folds runs longer than
+ * `contextLines * 2 + minFoldSize`.
+ */
+export const foldContextRows = (
+  rows: IDiffRow[],
+  options: { contextLines?: number; minFoldSize?: number } = {},
+): TDiffDisplayRow[] => {
+  const contextLines = options.contextLines ?? 3;
+  const minFoldSize = options.minFoldSize ?? 4;
+  const displayRows: TDiffDisplayRow[] = [];
+  let contextRun: IDiffRow[] = [];
+  let seenChange = false;
+
+  const flushRun = (isEnd: boolean) => {
+    if (!contextRun.length) return;
+    const keepHead = seenChange ? contextLines : 0;
+    const keepTail = isEnd ? 0 : contextLines;
+    if (contextRun.length > keepHead + keepTail + minFoldSize) {
+      displayRows.push(...contextRun.slice(0, keepHead));
+      displayRows.push({ kind: 'fold', rows: contextRun.slice(keepHead, contextRun.length - keepTail) });
+      if (keepTail) displayRows.push(...contextRun.slice(contextRun.length - keepTail));
+    } else {
+      displayRows.push(...contextRun);
+    }
+    contextRun = [];
+  };
+
+  for (const row of rows) {
+    if (row.kind === 'context') {
+      contextRun.push(row);
+    } else {
+      flushRun(false);
+      seenChange = true;
+      displayRows.push(row);
+    }
+  }
+  flushRun(true);
+  return displayRows;
+};
+
+/** Pairs rows into side-by-side cells; balanced remove/add runs align 1:1. */
+export const buildSplitRows = (rows: Array<IDiffRow>): ISplitRow[] => {
+  const splitRows: ISplitRow[] = [];
+  let index = 0;
+  while (index < rows.length) {
+    const row = rows[index];
+    if (row.kind === 'hunk') {
+      splitRows.push({ kind: 'hunk', text: row.text });
+      index++;
+      continue;
+    }
+    if (row.kind === 'context') {
+      splitRows.push({
+        kind: 'pair',
+        left: { kind: 'context', text: row.text, line: row.oldLine ?? 0 },
+        right: { kind: 'context', text: row.text, line: row.newLine ?? 0 },
+      });
+      index++;
+      continue;
+    }
+    // change block: collect consecutive removes then adds, pair them up
+    const removes: IDiffRow[] = [];
+    const adds: IDiffRow[] = [];
+    while (index < rows.length && rows[index].kind === 'remove') removes.push(rows[index++]);
+    while (index < rows.length && rows[index].kind === 'add') adds.push(rows[index++]);
+    const pairCount = Math.max(removes.length, adds.length);
+    for (let pairIndex = 0; pairIndex < pairCount; pairIndex++) {
+      const removeRow = removes[pairIndex];
+      const addRow = adds[pairIndex];
+      splitRows.push({
+        kind: 'pair',
+        left: removeRow
+          ? { kind: 'remove', text: removeRow.text, line: removeRow.oldLine ?? 0, segments: removeRow.segments }
+          : undefined,
+        right: addRow
+          ? { kind: 'add', text: addRow.text, line: addRow.newLine ?? 0, segments: addRow.segments }
+          : undefined,
+      });
+    }
+  }
+  return splitRows;
+};
+
+export const diffStats = (rows: Array<IDiffRow>): IDiffStats => {
+  let added = 0;
+  let removed = 0;
+  for (const row of rows) {
+    if (row.kind === 'add') added++;
+    else if (row.kind === 'remove') removed++;
+  }
+  return { added, removed };
+};
+
+/** Serializes rows back into a unified diff (for copy-to-clipboard). */
+export const toUnifiedDiff = (
+  rows: IDiffRow[],
+  options: { contextLines?: number; fileNameBefore?: string; fileNameAfter?: string } = {},
+): string => {
+  const contextLines = options.contextLines ?? 3;
+  const lines: string[] = [];
+  if (options.fileNameBefore || options.fileNameAfter) {
+    lines.push(`--- ${options.fileNameBefore ?? 'a'}`);
+    lines.push(`+++ ${options.fileNameAfter ?? 'b'}`);
+  }
+
+  interface IHunk { startIndex: number; endIndex: number; }
+  const hunks: IHunk[] = [];
+  let currentHunk: IHunk | undefined;
+  rows.forEach((row, index) => {
+    if (row.kind === 'add' || row.kind === 'remove') {
+      const startIndex = Math.max(0, index - contextLines);
+      if (currentHunk && startIndex <= currentHunk.endIndex + 1) {
+        currentHunk.endIndex = Math.min(rows.length - 1, index + contextLines);
+      } else {
+        currentHunk = { startIndex, endIndex: Math.min(rows.length - 1, index + contextLines) };
+        hunks.push(currentHunk);
+      }
+    }
+  });
+
+  for (const hunk of hunks) {
+    const hunkRows = rows
+      .slice(hunk.startIndex, hunk.endIndex + 1)
+      .filter((row) => row.kind !== 'hunk');
+    const firstOld = hunkRows.find((row) => row.oldLine !== undefined)?.oldLine ?? 0;
+    const firstNew = hunkRows.find((row) => row.newLine !== undefined)?.newLine ?? 0;
+    const oldCount = hunkRows.filter((row) => row.kind === 'context' || row.kind === 'remove').length;
+    const newCount = hunkRows.filter((row) => row.kind === 'context' || row.kind === 'add').length;
+    lines.push(`@@ -${firstOld},${oldCount} +${firstNew},${newCount} @@`);
+    for (const row of hunkRows) {
+      lines.push(`${row.kind === 'add' ? '+' : row.kind === 'remove' ? '-' : ' '}${row.text}`);
+    }
+  }
+  return lines.join('\n');
+};

package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.demo.ts

@@ -1,5 +1,85 @@
 import { html, cssManager } from '@design.estate/dees-element';
 
+// Passed via property binding: slotted text cannot carry generics like
+// Promise<User[]> — the HTML parser reads the angle brackets as a tag and
+// truncates the text node.
+const typescriptSample = `interface User {
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
+}
+
+class UserService {
+  private users: User[] = [];
+
+  constructor(private apiUrl: string) {
+    console.log('UserService initialized');
+  }
+
+  async getUsers(): Promise<User[]> {
+    try {
+      const response = await fetch(this.apiUrl);
+      const data = await response.json();
+      return data.users;
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      return [];
+    }
+  }
+
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+}
+
+// Usage example
+const service = new UserService('https://api.example.com/users');
+const users = await service.getUsers();
+console.log('Found users:', users.length);`;
+
+const diffBefore = `export const greet = (name: string) => {
+  const greeting = 'Hello ' + name;
+  console.log(greeting);
+  return greeting;
+};
+
+export const farewell = (name: string) => {
+  return 'Goodbye ' + name;
+};
+
+const unusedHelper = () => {
+  return 42;
+};`;
+
+const diffAfter = `export const greet = (name: string, excited = false) => {
+  const greeting = \`Hello \${name}\${excited ? '!' : ''}\`;
+  console.log(greeting);
+  return greeting;
+};
+
+export const farewell = (name: string) => {
+  return 'Goodbye ' + name;
+};
+
+export const wave = () => {
+  return '👋';
+};`;
+
+const longBefore = Array.from({ length: 60 }, (_, i) => `line ${i + 1}: stable content`).join('\n');
+const longAfter = longBefore.replace('line 30: stable content', 'line 30: CHANGED content');
+
+const unifiedPatchSample = `--- a/src/config.ts
++++ b/src/config.ts
+@@ -1,6 +1,7 @@
+ export const config = {
+-  retries: 3,
++  retries: 5,
++  timeoutMs: 30_000,
+   verbose: false,
+ };
+`;
+
 export const demoFunc = () => html`
   <style>
     .demoWrapper {
@@ -37,42 +117,11 @@ export const demoFunc = () => html`
     <div class="section">
       <div class="section-title">TypeScript Code Example</div>
       <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
-      <dees-dataview-codebox proglang="typescript">
-interface User {
-  id: number;
-  name: string;
-  email: string;
-  isActive: boolean;
-}
-
-class UserService {
-  private users: User[] = [];
-  
-  constructor(private apiUrl: string) {
-    console.log('UserService initialized');
-  }
-  
-  async getUsers(): Promise<User[]> {
-    try {
-      const response = await fetch(this.apiUrl);
-      const data = await response.json();
-      return data.users;
-    } catch (error) {
-      console.error('Failed to fetch users:', error);
-      return [];
-    }
-  }
-  
-  addUser(user: User): void {
-    this.users.push(user);
-  }
-}
-
-// Usage example
-const service = new UserService('https://api.example.com/users');
-const users = await service.getUsers();
-console.log('Found users:', users.length);
-      </dees-dataview-codebox>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="user.service.ts"
+        .codeToDisplay=${typescriptSample}
+      ></dees-dataview-codebox>
     </div>
     
     <div class="section">
@@ -96,7 +145,7 @@ const fetchData = async (url) => {
 
 // Modern syntax
 const greet = (name = 'World') => \`Hello, \${name}!\`;
-console.log(greet('ShadCN'));
+console.log(greet('design.estate'));
       </dees-dataview-codebox>
     </div>
     
@@ -176,7 +225,7 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
     <div class="section">
       <div class="section-title">JSON Example</div>
       <div class="section-description">JSON configuration with proper formatting.</div>
-      <dees-dataview-codebox proglang="json">
+      <dees-dataview-codebox proglang="json" filename="package.json">
 {
   "name": "@design.estate/dees-catalog",
   "version": "1.10.7",
@@ -195,5 +244,50 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
 }
       </dees-dataview-codebox>
     </div>
+    <div class="section">
+      <div class="section-title">Inline Diff</div>
+      <div class="section-description">Line diff computed from before/after code with intraline change tint and context folding.</div>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="greeter.ts"
+        diffView="inline"
+        .codeBefore=${diffBefore}
+        .codeToDisplay=${diffAfter}
+      ></dees-dataview-codebox>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Side-by-Side Diff</div>
+      <div class="section-description">The same change rendered split: before on the left, after on the right, filler rows keep hunks aligned.</div>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="greeter.ts"
+        diffView="split"
+        .codeBefore=${diffBefore}
+        .codeToDisplay=${diffAfter}
+      ></dees-dataview-codebox>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Diff With Folded Context</div>
+      <div class="section-description">Unchanged runs collapse to expandable folds so long files read like a review diff.</div>
+      <dees-dataview-codebox
+        proglang="plaintext"
+        filename="big-file.txt"
+        diffView="inline"
+        .codeBefore=${longBefore}
+        .codeToDisplay=${longAfter}
+      ></dees-dataview-codebox>
+    </div>
+
+    <div class="section">
+      <div class="section-title">Unified Patch Input</div>
+      <div class="section-description">Pre-computed unified diffs render directly, hunk headers included.</div>
+      <dees-dataview-codebox
+        proglang="typescript"
+        filename="config.ts"
+        .unifiedDiff=${unifiedPatchSample}
+      ></dees-dataview-codebox>
+    </div>
   </div>
 `