@buoy-gg/shared-ui 1.7.2

package/lib/module/dataViewer/diffThemes.js

@@ -0,0 +1,104 @@
+"use strict";
+
+/**
+ * Diff Viewer Theme System
+ *
+ * Provides theme definitions for the SplitDiffViewer component.
+ * Includes both light (Git Classic) and dark (Dev Tools) themes.
+ */
+
+/**
+ * Git Classic Theme
+ * Traditional Git diff colors - simple and familiar
+ */
+export const gitClassicTheme = {
+  name: "Git Classic",
+  description: "Traditional Git diff colors - simple and familiar",
+  background: "#FFFFFF",
+  panelBackground: "#F8F8F8",
+  headerBackground: "#F0F0F0",
+  addedBackground: "#E6FFED",
+  removedBackground: "#FFEEF0",
+  modifiedBackground: "#FFF5DD",
+  unchangedBackground: "transparent",
+  contextBackground: "#FAFAFA",
+  addedText: "#22863A",
+  removedText: "#CB2431",
+  modifiedText: "#B08800",
+  unchangedText: "#24292E",
+  addedWordHighlight: "#ACF2BD",
+  removedWordHighlight: "#FDB8C0",
+  lineNumberBackground: "#F6F8FA",
+  lineNumberText: "#959DA5",
+  lineNumberBorder: "#E1E4E8",
+  markerAddedBackground: "#CDFFD8",
+  markerRemovedBackground: "#FFDCE0",
+  markerModifiedBackground: "#FFF5B1",
+  markerText: "#666666",
+  borderColor: "#E1E4E8",
+  dividerColor: "#E1E4E8",
+  summaryBackground: "#F6F8FA",
+  summaryAddedText: "#28A745",
+  summaryRemovedText: "#D73A49",
+  summaryModifiedText: "#0366D6",
+  emptyStateText: "#586069",
+  separatorBackground: "#F6F8FA",
+  separatorText: "#586069"
+};
+
+/**
+ * Dev Tools Default Theme
+ * Clean dark theme using our gameUIColors
+ */
+export const devToolsDefaultTheme = {
+  name: "Dev Tools Default",
+  description: "Clean dark theme with our game UI colors",
+  // Use our gameUIColors-inspired dark theme
+  background: "#0A0E1A",
+  panelBackground: "#0F1420",
+  headerBackground: "#141925",
+  // Diff colors with our cyan/yellow/red scheme
+  addedBackground: "rgba(74, 255, 159, 0.1)",
+  removedBackground: "rgba(255, 82, 82, 0.1)",
+  modifiedBackground: "rgba(0, 184, 230, 0.1)",
+  unchangedBackground: "transparent",
+  contextBackground: "rgba(255, 255, 255, 0.02)",
+  // Text colors
+  addedText: "#4AFF9F",
+  removedText: "#FF5252",
+  modifiedText: "#00B8E6",
+  unchangedText: "#B8BFC9",
+  // Word-level highlights
+  addedWordHighlight: "rgba(74, 255, 159, 0.3)",
+  removedWordHighlight: "rgba(255, 82, 82, 0.3)",
+  // UI elements
+  lineNumberBackground: "#0A0E1A",
+  lineNumberText: "#7A8599",
+  lineNumberBorder: "#1F2937",
+  // Markers
+  markerAddedBackground: "rgba(74, 255, 159, 0.2)",
+  markerRemovedBackground: "rgba(255, 82, 82, 0.2)",
+  markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
+  markerText: "#7A8599",
+  // Borders and dividers
+  borderColor: "#1F2937",
+  dividerColor: "#1F2937",
+  // Summary bar
+  summaryBackground: "#0F1420",
+  summaryAddedText: "#4AFF9F",
+  summaryRemovedText: "#FF5252",
+  summaryModifiedText: "#00B8E6",
+  // Empty state
+  emptyStateText: "#7A8599",
+  // Separator
+  separatorBackground: "#141925",
+  separatorText: "#7A8599"
+};
+
+/**
+ * Theme collection
+ */
+export const diffThemes = {
+  gitClassic: gitClassicTheme,
+  devToolsDefault: devToolsDefaultTheme
+};

package/lib/module/dataViewer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+// Export shared components for use across the app
+export { DataViewer } from "./DataViewer.js";
+export { VirtualizedDataExplorer } from "./VirtualizedDataExplorer.js";
+export { TypeLegend } from "./TypeLegend.js";
+export { CyberpunkInput } from "./CyberpunkInput.js";
+export { IndentGuides } from "./IndentGuides.js";
+export { IndentGuidesOverlay } from "./IndentGuidesOverlay.js";
+export { default as TreeDiffViewer } from "./tree/TreeDiffViewer.js";
+
+// Diff viewer components
+export { SplitDiffViewer } from "./SplitDiffViewer.js";
+export { DiffSummary } from "./DiffSummary.js";
+// Diff utilities and themes
+export { computeLineDiff, DiffType } from "./lineDiff.js";
+export { diffThemes, gitClassicTheme, devToolsDefaultTheme } from "./diffThemes.js";

package/lib/module/dataViewer/lineDiff.js

@@ -0,0 +1,362 @@
+"use strict";
+
+/**
+ * Line-by-line diff computation for React Native
+ *
+ * Provides utilities for computing line-by-line diffs between objects,
+ * with support for word-level highlighting and various comparison methods.
+ */
+
+export let DiffType = /*#__PURE__*/function (DiffType) {
+  DiffType["DEFAULT"] = "unchanged";
+  DiffType["ADDED"] = "added";
+  DiffType["REMOVED"] = "removed";
+  DiffType["MODIFIED"] = "modified";
+  return DiffType;
+}({});
+/**
+ * Compute diff based on method - for word-level diff within lines
+ */
+function computeDiffByMethod(oldStr, newStr, method) {
+  let oldParts;
+  let newParts;
+  switch (method) {
+    case "chars":
+      // Split into individual characters
+      oldParts = oldStr.split("");
+      newParts = newStr.split("");
+      break;
+    case "words":
+      // Split by word boundaries, keeping whitespace
+      oldParts = oldStr.match(/\S+|\s+/g) || [];
+      newParts = newStr.match(/\S+|\s+/g) || [];
+      break;
+    case "trimmedLines":
+      {
+        // For trimmedLines, compare without leading/trailing whitespace
+        const oldTrimmed = oldStr.trim();
+        const newTrimmed = newStr.trim();
+        // But still do word-level diff on the trimmed content
+        oldParts = oldTrimmed.match(/\S+|\s+/g) || [];
+        newParts = newTrimmed.match(/\S+|\s+/g) || [];
+        break;
+      }
+    case "lines":
+    default:
+      // For lines mode, don't do word diff - just show the whole line
+      return {
+        left: [{
+          value: oldStr,
+          type: DiffType.REMOVED
+        }],
+        right: [{
+          value: newStr,
+          type: DiffType.ADDED
+        }]
+      };
+  }
+
+  // Simple LCS-like algorithm for better diff
+  const left = [];
+  const right = [];
+  let i = 0,
+    j = 0;
+
+  // Find matching parts
+  while (i < oldParts.length && j < newParts.length) {
+    if (oldParts[i] === newParts[j]) {
+      // Parts match
+      left.push({
+        value: oldParts[i],
+        type: DiffType.DEFAULT
+      });
+      right.push({
+        value: newParts[j],
+        type: DiffType.DEFAULT
+      });
+      i++;
+      j++;
+    } else {
+      // Look ahead for matches
+      let foundMatch = false;
+
+      // Check if we can find newParts[j] in upcoming oldParts
+      for (let k = i + 1; k < Math.min(i + 5, oldParts.length); k++) {
+        if (oldParts[k] === newParts[j]) {
+          // Mark everything from i to k-1 as removed
+          for (let m = i; m < k; m++) {
+            left.push({
+              value: oldParts[m],
+              type: DiffType.REMOVED
+            });
+          }
+          i = k;
+          foundMatch = true;
+          break;
+        }
+      }
+      if (!foundMatch) {
+        // Check if we can find oldParts[i] in upcoming newParts
+        for (let k = j + 1; k < Math.min(j + 5, newParts.length); k++) {
+          if (newParts[k] === oldParts[i]) {
+            // Mark everything from j to k-1 as added
+            for (let m = j; m < k; m++) {
+              right.push({
+                value: newParts[m],
+                type: DiffType.ADDED
+              });
+            }
+            j = k;
+            foundMatch = true;
+            break;
+          }
+        }
+      }
+      if (!foundMatch) {
+        // No match found nearby, mark as changed
+        left.push({
+          value: oldParts[i],
+          type: DiffType.REMOVED
+        });
+        right.push({
+          value: newParts[j],
+          type: DiffType.ADDED
+        });
+        i++;
+        j++;
+      }
+    }
+  }
+
+  // Handle remaining parts
+  while (i < oldParts.length) {
+    left.push({
+      value: oldParts[i],
+      type: DiffType.REMOVED
+    });
+    i++;
+  }
+  while (j < newParts.length) {
+    right.push({
+      value: newParts[j],
+      type: DiffType.ADDED
+    });
+    j++;
+  }
+  return {
+    left,
+    right
+  };
+}
+
+/**
+ * Convert object to formatted JSON lines
+ */
+function objectToLines(obj) {
+  if (obj === null || obj === undefined) {
+    return [String(obj)];
+  }
+  try {
+    // Pretty print JSON with 2 space indentation
+    const jsonStr = JSON.stringify(obj, null, 2);
+    // Split into lines and filter out empty lines that appear between array elements
+    const lines = jsonStr.split("\n");
+
+    // Remove empty lines but keep structure
+    const filteredLines = [];
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const trimmed = line.trim();
+
+      // Keep the line if it's not empty or if it's meaningful whitespace
+      if (trimmed !== "") {
+        filteredLines.push(line);
+      } else if (i === 0 || i === lines.length - 1) {
+        // Keep first and last empty lines if they exist (though they shouldn't)
+        filteredLines.push(line);
+      }
+      // Skip other empty lines
+    }
+    return filteredLines;
+  } catch {
+    return [String(obj)];
+  }
+}
+
+/**
+ * Apply showDiffOnly filter with context lines
+ */
+function filterDiffWithContext(diffs, contextLines) {
+  if (contextLines < 0) return diffs;
+  const result = [];
+  const changedIndices = [];
+
+  // Find all changed lines
+  diffs.forEach((diff, idx) => {
+    if (diff.type !== DiffType.DEFAULT) {
+      changedIndices.push(idx);
+    }
+  });
+
+  // If no changes, return empty
+  if (changedIndices.length === 0) {
+    return [];
+  }
+
+  // Build ranges to include
+  const ranges = [];
+  let currentStart = Math.max(0, changedIndices[0] - contextLines);
+  let currentEnd = Math.min(diffs.length - 1, changedIndices[0] + contextLines);
+  for (let i = 1; i < changedIndices.length; i++) {
+    const idx = changedIndices[i];
+    const rangeStart = Math.max(0, idx - contextLines);
+    const rangeEnd = Math.min(diffs.length - 1, idx + contextLines);
+
+    // If ranges overlap or are adjacent, merge them
+    if (rangeStart <= currentEnd + 1) {
+      currentEnd = Math.max(currentEnd, rangeEnd);
+    } else {
+      // Save current range and start a new one
+      ranges.push([currentStart, currentEnd]);
+      currentStart = rangeStart;
+      currentEnd = rangeEnd;
+    }
+  }
+
+  // Don't forget the last range
+  ranges.push([currentStart, currentEnd]);
+
+  // Build result from ranges
+  ranges.forEach(([start, end]) => {
+    for (let i = start; i <= end; i++) {
+      result.push(diffs[i]);
+    }
+  });
+  return result;
+}
+
+/**
+ * Compare lines based on method
+ */
+function compareLinesWithMethod(line1, line2, method) {
+  switch (method) {
+    case "trimmedLines":
+      return line1.trim() === line2.trim();
+    case "chars":
+    case "words":
+    case "lines":
+    default:
+      return line1 === line2;
+  }
+}
+
+/**
+ * Compute line-by-line diff between two objects
+ */
+export function computeLineDiff(oldValue, newValue, options = {}) {
+  const {
+    compareMethod = "words",
+    disableWordDiff = false,
+    showDiffOnly = false,
+    contextLines = 3
+  } = options;
+  const oldLines = objectToLines(oldValue);
+  const newLines = objectToLines(newValue);
+  const result = [];
+  let leftLineNum = 1;
+  let rightLineNum = 1;
+
+  // Simple line diff algorithm (can be improved with LCS)
+  let i = 0,
+    j = 0;
+  while (i < oldLines.length || j < newLines.length) {
+    if (i >= oldLines.length) {
+      // Rest are additions
+      result.push({
+        rightLineNumber: rightLineNum++,
+        type: DiffType.ADDED,
+        rightContent: newLines[j],
+        rightRaw: newLines[j]
+      });
+      j++;
+    } else if (j >= newLines.length) {
+      // Rest are removals
+      result.push({
+        leftLineNumber: leftLineNum++,
+        type: DiffType.REMOVED,
+        leftContent: oldLines[i],
+        leftRaw: oldLines[i]
+      });
+      i++;
+    } else if (compareLinesWithMethod(oldLines[i], newLines[j], compareMethod === "trimmedLines" ? "trimmedLines" : "lines")) {
+      // Lines match (possibly after trimming if trimmedLines)
+      result.push({
+        leftLineNumber: leftLineNum++,
+        rightLineNumber: rightLineNum++,
+        type: DiffType.DEFAULT,
+        leftContent: oldLines[i],
+        rightContent: newLines[j],
+        leftRaw: oldLines[i],
+        rightRaw: newLines[j]
+      });
+      i++;
+      j++;
+    } else {
+      // Lines differ - check if it's a modification or separate add/remove
+      const oldTrimmed = oldLines[i].trim();
+      const newTrimmed = newLines[j].trim();
+
+      // Simple heuristic: if lines start similarly, treat as modification
+      if (oldTrimmed && newTrimmed && (oldTrimmed.startsWith(newTrimmed.substring(0, 3)) || newTrimmed.startsWith(oldTrimmed.substring(0, 3)))) {
+        // Treat as modification - compute word diff if enabled
+        if (!disableWordDiff && compareMethod !== "lines") {
+          const wordDiff = computeDiffByMethod(oldLines[i], newLines[j], compareMethod);
+          result.push({
+            leftLineNumber: leftLineNum++,
+            rightLineNumber: rightLineNum++,
+            type: DiffType.MODIFIED,
+            leftContent: wordDiff.left,
+            rightContent: wordDiff.right,
+            leftRaw: oldLines[i],
+            rightRaw: newLines[j]
+          });
+        } else {
+          // No word diff - just mark lines as different
+          result.push({
+            leftLineNumber: leftLineNum++,
+            rightLineNumber: rightLineNum++,
+            type: DiffType.MODIFIED,
+            leftContent: oldLines[i],
+            rightContent: newLines[j],
+            leftRaw: oldLines[i],
+            rightRaw: newLines[j]
+          });
+        }
+        i++;
+        j++;
+      } else {
+        // Treat as separate remove and add
+        result.push({
+          leftLineNumber: leftLineNum++,
+          type: DiffType.REMOVED,
+          leftContent: oldLines[i],
+          leftRaw: oldLines[i]
+        });
+        result.push({
+          rightLineNumber: rightLineNum++,
+          type: DiffType.ADDED,
+          rightContent: newLines[j],
+          rightRaw: newLines[j]
+        });
+        i++;
+        j++;
+      }
+    }
+  }
+
+  // Apply showDiffOnly filter if enabled
+  if (showDiffOnly) {
+    return filterDiffWithContext(result, contextLines);
+  }
+  return result;
+}