@buoy-gg/shared-ui 7.0.16 → 7.0.18

package/lib/module/dataViewer/ThemedSplitView.js

@@ -0,0 +1,617 @@
+"use strict";
+
+/**
+ * ThemedSplitView — the production-grade split diff renderer, promoted from
+ * packages/storage (its original home) so every tool shares ONE copy.
+ *
+ * Compared to SplitDiffViewer: GitHub-style auto-folding of unchanged runs
+ * (CONTEXT_LINES / MIN_FOLD_SIZE), a memoized single-pass summary, FlatList
+ * virtualization when scrolling — and a documented inline branch, because a
+ * FlatList can't virtualize inside a page ScrollView (no viewport of its own
+ * to measure against), so inline mode renders rows directly.
+ */
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, FlatList, StyleSheet, TouchableOpacity } from "react-native";
+import { computeLineDiff, DiffType } from "./lineDiff.js";
+import { DiffSummary } from "./DiffSummary.js";
+
+/** Rendering options (the shape storage's DiffOptionsPanel edits). */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_OPTIONS = {
+  hideLineNumbers: false,
+  disableWordDiff: false,
+  showDiffOnly: false,
+  compareMethod: "words",
+  contextLines: 3,
+  lineOffset: 0
+};
+export function ThemedSplitView({
+  oldValue,
+  newValue,
+  theme,
+  options = DEFAULT_OPTIONS,
+  showThemeName = false,
+  scrollEnabled = true
+}) {
+  // Inline mode drops the fixed 400pt pane so the container grows with the
+  // rows; the ancestor ScrollView is what scrolls them.
+  const dynamicStyles = useMemo(() => createDynamicStyles(theme, scrollEnabled), [theme, scrollEnabled]);
+  const diffComputeOptions = useMemo(() => ({
+    compareMethod: options.compareMethod,
+    disableWordDiff: options.disableWordDiff,
+    showDiffOnly: options.showDiffOnly,
+    contextLines: options.contextLines
+  }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
+  const lineDiffs = useMemo(() => computeLineDiff(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
+
+  // One pass for the summary instead of three .filter() calls per render.
+  const summary = useMemo(() => {
+    let added = 0;
+    let removed = 0;
+    let modified = 0;
+    for (const d of lineDiffs) {
+      if (d.type === DiffType.ADDED) added++;else if (d.type === DiffType.REMOVED) removed++;else if (d.type === DiffType.MODIFIED) modified++;
+    }
+    return {
+      added,
+      removed,
+      modified
+    };
+  }, [lineDiffs]);
+
+  // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
+  // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
+  // the rest into a tappable header.
+  const [expandedFolds, setExpandedFolds] = useState(() => new Set());
+
+  // Reset fold expansion when the user actually switches comparisons. Parent
+  // memoizes oldValue/newValue, so this only fires on a real change — not on
+  // every re-render. First run is a no-op (initial state is already empty).
+  const hasMountedRef = useRef(false);
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    setExpandedFolds(new Set());
+  }, [oldValue, newValue]);
+  const items = useMemo(() => buildSplitItems(lineDiffs, expandedFolds), [lineDiffs, expandedFolds]);
+  const toggleFold = useCallback(foldId => {
+    setExpandedFolds(prev => {
+      const next = new Set(prev);
+      if (next.has(foldId)) next.delete(foldId);else next.add(foldId);
+      return next;
+    });
+  }, []);
+  const keyExtractor = useCallback(item => item.kind === "row" ? `r:${item.diffIndex}` : `f:${item.foldId}`, []);
+  const renderSplitItem = useCallback(item => {
+    if (item.kind === "fold") {
+      return /*#__PURE__*/_jsx(FoldHeader, {
+        foldId: item.foldId,
+        count: item.count,
+        expanded: item.expanded,
+        theme: theme,
+        styles: dynamicStyles,
+        onToggle: toggleFold
+      });
+    }
+    return /*#__PURE__*/_jsx(DiffRow, {
+      diff: item.diff,
+      showSeparator: false,
+      theme: theme,
+      options: options,
+      styles: dynamicStyles
+    });
+  }, [theme, options, dynamicStyles, toggleFold]);
+  const renderItem = useCallback(({
+    item
+  }) => renderSplitItem(item), [renderSplitItem]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [dynamicStyles.container, theme.glowColor && {
+      shadowColor: theme.glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: theme.neonIntensity && theme.neonIntensity > 0.7 ? 0.5 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 0.3 : 0.1,
+      shadowRadius: theme.neonIntensity && theme.neonIntensity > 0.7 ? 10 : theme.neonIntensity && theme.neonIntensity > 0.3 ? 5 : 2
+    }],
+    children: [showThemeName && /*#__PURE__*/_jsxs(View, {
+      style: dynamicStyles.themeBadge,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.themeName,
+        children: theme.name
+      }), /*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.themeDescription,
+        children: theme.description
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: dynamicStyles.header,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.headerLeft,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.headerTitle,
+          children: "PREV"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.divider
+      }), /*#__PURE__*/_jsx(View, {
+        style: dynamicStyles.headerRight,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: dynamicStyles.headerTitle,
+          children: "CUR"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(DiffSummary, {
+      added: summary.added,
+      removed: summary.removed,
+      modified: summary.modified,
+      theme: theme
+    }), lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
+      style: dynamicStyles.emptyState,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: dynamicStyles.emptyText,
+        children: options.showDiffOnly ? "No differences found" : "No content to display"
+      })
+    }) : scrollEnabled ? /*#__PURE__*/_jsx(FlatList, {
+      style: dynamicStyles.scrollView,
+      contentContainerStyle: dynamicStyles.scrollContent,
+      data: items,
+      renderItem: renderItem,
+      keyExtractor: keyExtractor,
+      showsVerticalScrollIndicator: false,
+      initialNumToRender: 20,
+      maxToRenderPerBatch: 20,
+      windowSize: 7,
+      removeClippedSubviews: true
+    }) :
+    /*#__PURE__*/
+    // A FlatList can't virtualize inside a page ScrollView — it has no
+    // viewport of its own to measure against — so render the rows directly.
+    // Folding already keeps this list short (unchanged runs collapse).
+    _jsx(View, {
+      style: dynamicStyles.scrollContent,
+      children: items.map(item => /*#__PURE__*/_jsx(Fragment, {
+        children: renderSplitItem(item)
+      }, keyExtractor(item)))
+    })]
+  });
+}
+
+// Number of context lines kept visible on either side of every change.
+const CONTEXT_LINES = 3;
+// Don't bother folding tiny gaps — toggling them is more friction than scroll.
+const MIN_FOLD_SIZE = 4;
+function buildSplitItems(lineDiffs, expandedFolds) {
+  const n = lineDiffs.length;
+  if (n === 0) return [];
+
+  // Mark every line that should always be visible: any change, plus
+  // CONTEXT_LINES on either side of it.
+  const visible = new Array(n).fill(false);
+  for (let i = 0; i < n; i++) {
+    if (lineDiffs[i].type !== DiffType.DEFAULT) {
+      const start = Math.max(0, i - CONTEXT_LINES);
+      const end = Math.min(n - 1, i + CONTEXT_LINES);
+      for (let k = start; k <= end; k++) visible[k] = true;
+    }
+  }
+  const items = [];
+  let foldId = 0;
+  let i = 0;
+  while (i < n) {
+    if (visible[i]) {
+      items.push({
+        kind: "row",
+        diff: lineDiffs[i],
+        diffIndex: i
+      });
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < n && !visible[j]) j++;
+    const runLength = j - i;
+    if (runLength < MIN_FOLD_SIZE) {
+      for (let k = i; k < j; k++) {
+        items.push({
+          kind: "row",
+          diff: lineDiffs[k],
+          diffIndex: k
+        });
+      }
+    } else {
+      const id = foldId++;
+      const expanded = expandedFolds.has(id);
+      items.push({
+        kind: "fold",
+        foldId: id,
+        count: runLength,
+        expanded
+      });
+      if (expanded) {
+        for (let k = i; k < j; k++) {
+          items.push({
+            kind: "row",
+            diff: lineDiffs[k],
+            diffIndex: k
+          });
+        }
+      }
+    }
+    i = j;
+  }
+  return items;
+}
+const FoldHeader = /*#__PURE__*/memo(function FoldHeader({
+  foldId,
+  count,
+  expanded,
+  theme,
+  styles,
+  onToggle
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: [styles.foldHeader, {
+      backgroundColor: theme.separatorBackground
+    }],
+    onPress: () => onToggle(foldId),
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.foldHeaderText, {
+        color: theme.separatorText
+      }],
+      children: expanded ? `▼  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to hide` : `▶  ${count} unchanged line${count === 1 ? "" : "s"}  —  tap to expand`
+    })
+  });
+});
+const DiffRow = /*#__PURE__*/memo(function DiffRow({
+  diff,
+  showSeparator,
+  theme,
+  options,
+  styles
+}) {
+  const isRemoved = diff.type === DiffType.REMOVED;
+  const isAdded = diff.type === DiffType.ADDED;
+  const isModified = diff.type === DiffType.MODIFIED;
+  const isDefault = diff.type === DiffType.DEFAULT;
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [showSeparator && /*#__PURE__*/_jsx(View, {
+      style: styles.separator,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.separatorText,
+        children: "\u2022 \u2022 \u2022"
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.leftSide,
+        children: isRemoved || isModified || isDefault ? /*#__PURE__*/_jsx(LineSide, {
+          lineNumber: diff.leftLineNumber,
+          content: diff.leftContent,
+          type: isModified ? DiffType.REMOVED : diff.type,
+          marker: isRemoved || isModified ? "-" : " ",
+          theme: theme,
+          options: options,
+          styles: styles
+        }) : /*#__PURE__*/_jsx(EmptyLineSide, {
+          options: options,
+          styles: styles
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.centerDivider
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.rightSide,
+        children: isAdded || isModified || isDefault ? /*#__PURE__*/_jsx(LineSide, {
+          lineNumber: diff.rightLineNumber,
+          content: diff.rightContent,
+          type: isModified ? DiffType.ADDED : diff.type,
+          marker: isAdded || isModified ? "+" : " ",
+          theme: theme,
+          options: options,
+          styles: styles
+        }) : /*#__PURE__*/_jsx(EmptyLineSide, {
+          options: options,
+          styles: styles
+        })
+      })]
+    })]
+  });
+});
+function LineSide({
+  lineNumber,
+  content,
+  type,
+  marker,
+  theme,
+  options,
+  styles
+}) {
+  const colors = getDiffColors(type, theme);
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
+      style: [styles.gutter, {
+        backgroundColor: theme.lineNumberBackground
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.lineNumber,
+        children: lineNumber || " "
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.marker, {
+        backgroundColor: colors.markerBg
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.markerText, {
+          color: theme.markerText
+        }],
+        children: marker
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.contentCell, {
+        backgroundColor: colors.background
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.content, {
+          color: colors.text
+        }],
+        children: Array.isArray(content) ? content.map((word, idx) => {
+          let backgroundColor = "transparent";
+          if (word.type === DiffType.ADDED) {
+            backgroundColor = theme.addedWordHighlight;
+          } else if (word.type === DiffType.REMOVED) {
+            backgroundColor = theme.removedWordHighlight;
+          }
+          return /*#__PURE__*/_jsx(Text, {
+            style: [styles.wordDiff, {
+              backgroundColor
+            }],
+            children: word.value
+          }, idx);
+        }) : content || " "
+      })
+    })]
+  });
+}
+function EmptyLineSide({
+  options,
+  styles
+}) {
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [!options.hideLineNumbers && /*#__PURE__*/_jsx(View, {
+      style: [styles.gutter, styles.emptyGutter],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.lineNumber,
+        children: " "
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.marker, styles.emptyMarker],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.markerText,
+        children: " "
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.contentCell, styles.emptyContent],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.content,
+        children: " "
+      })
+    })]
+  });
+}
+function getDiffColors(type, theme) {
+  switch (type) {
+    case DiffType.ADDED:
+      return {
+        background: theme.addedBackground,
+        text: theme.addedText,
+        markerBg: theme.markerAddedBackground
+      };
+    case DiffType.REMOVED:
+      return {
+        background: theme.removedBackground,
+        text: theme.removedText,
+        markerBg: theme.markerRemovedBackground
+      };
+    case DiffType.DEFAULT:
+    default:
+      return {
+        background: theme.unchangedBackground,
+        text: theme.unchangedText,
+        markerBg: "transparent"
+      };
+  }
+}
+
+// Create dynamic styles based on theme
+function createDynamicStyles(theme, scrollEnabled) {
+  return StyleSheet.create({
+    container: {
+      // Fixed pane only when the rows scroll themselves; inline mode sizes to
+      // content so the page scroll reveals it.
+      ...(scrollEnabled ? {
+        height: 400
+      } : null),
+      backgroundColor: theme.background,
+      borderRadius: 8,
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: theme.borderColor
+    },
+    themeBadge: {
+      backgroundColor: theme.panelBackground,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.borderColor
+    },
+    themeName: {
+      fontSize: 12,
+      fontWeight: "700",
+      color: theme.accentColor || theme.unchangedText,
+      fontFamily: "monospace",
+      letterSpacing: 0.5
+    },
+    themeDescription: {
+      fontSize: 10,
+      color: theme.unchangedText,
+      fontFamily: "monospace",
+      marginTop: 2,
+      opacity: 0.8
+    },
+    header: {
+      flexDirection: "row",
+      backgroundColor: theme.headerBackground,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.borderColor
+    },
+    headerLeft: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    },
+    headerRight: {
+      flex: 1,
+      paddingVertical: 8,
+      paddingHorizontal: 12
+    },
+    headerTitle: {
+      fontSize: 10,
+      fontWeight: "700",
+      color: theme.accentColor || theme.unchangedText,
+      fontFamily: "monospace",
+      letterSpacing: 0.5,
+      textTransform: "uppercase"
+    },
+    divider: {
+      width: 1,
+      backgroundColor: theme.dividerColor
+    },
+    scrollView: {
+      flex: 1
+    },
+    scrollContent: {
+      paddingBottom: 10
+    },
+    row: {
+      flexDirection: "row",
+      minHeight: 20
+    },
+    leftSide: {
+      flex: 1,
+      flexDirection: "row"
+    },
+    rightSide: {
+      flex: 1,
+      flexDirection: "row"
+    },
+    centerDivider: {
+      width: 1,
+      backgroundColor: theme.dividerColor
+    },
+    gutter: {
+      width: 35,
+      paddingHorizontal: 4,
+      justifyContent: "center",
+      alignItems: "flex-end",
+      backgroundColor: theme.lineNumberBackground,
+      borderRightWidth: 1,
+      borderRightColor: theme.lineNumberBorder
+    },
+    emptyGutter: {
+      backgroundColor: theme.contextBackground
+    },
+    lineNumber: {
+      fontSize: 9,
+      fontFamily: "monospace",
+      color: theme.lineNumberText
+    },
+    marker: {
+      width: 20,
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    emptyMarker: {
+      backgroundColor: theme.contextBackground
+    },
+    markerText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      fontWeight: "600"
+    },
+    contentCell: {
+      flex: 1,
+      paddingHorizontal: 8,
+      paddingVertical: 2
+    },
+    emptyContent: {
+      backgroundColor: theme.contextBackground
+    },
+    content: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      lineHeight: 16
+    },
+    wordDiff: {
+      fontSize: 10,
+      fontFamily: "monospace"
+    },
+    summaryBar: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 16,
+      paddingVertical: 6,
+      backgroundColor: theme.summaryBackground,
+      borderTopWidth: 1,
+      borderTopColor: theme.borderColor
+    },
+    summaryItem: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    summaryText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      fontWeight: "700"
+    },
+    separator: {
+      height: 20,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.separatorBackground
+    },
+    separatorText: {
+      fontSize: 8,
+      color: theme.separatorText,
+      fontFamily: "monospace",
+      letterSpacing: 2
+    },
+    foldHeader: {
+      paddingVertical: 6,
+      paddingHorizontal: 12,
+      alignItems: "center",
+      justifyContent: "center",
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: theme.borderColor
+    },
+    foldHeaderText: {
+      fontSize: 10,
+      fontFamily: "monospace",
+      letterSpacing: 0.5
+    },
+    emptyState: {
+      padding: 40,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    emptyText: {
+      fontSize: 11,
+      color: theme.emptyStateText,
+      fontStyle: "italic",
+      fontFamily: "monospace"
+    }
+  });
+}

package/lib/module/dataViewer/index.js

@@ -35,4 +35,10 @@ export { SplitDiffViewer } from "./SplitDiffViewer.js";
 export { DiffSummary } from "./DiffSummary.js";
 // Diff utilities and themes
 export { computeLineDiff, DiffType, ABSENT_VALUE, isAbsent } from "./lineDiff.js";
-export { diffThemes, gitClassicTheme, devToolsDefaultTheme } from "./diffThemes.js";
+export { diffThemes, gitClassicTheme, devToolsDefaultTheme } from "./diffThemes.js";
+
+// Bounded diff kernel + render normalizer + size probe (verdicts/badges — not rendering)
+export { objectDiff, boundedDeepEqual, toDiffable, jsonLikelyLargerThan } from "./objectDiff.js";
+
+// The production split renderer (folding + virtualization), promoted from storage
+export { ThemedSplitView } from "./ThemedSplitView.js";