@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/commonjs/dataViewer/ThemedSplitView.js

@@ -1,642 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ThemedSplitView = ThemedSplitView;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _lineDiff = require("./lineDiff.js");
-var _DiffSummary = require("./DiffSummary.js");
-var _TimestampDeltaBar = require("./TimestampDeltaBar.js");
-var _timestampDiff = require("./timestampDiff.js");
-var _JsonStringNotice = require("./JsonStringNotice.js");
-var _jsonStringValue = require("./jsonStringValue.js");
-var _fonts = require("../ui/fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-/** Rendering options (the shape storage's DiffOptionsPanel edits). */
-
-const DEFAULT_OPTIONS = {
-  hideLineNumbers: false,
-  disableWordDiff: false,
-  showDiffOnly: false,
-  compareMethod: "words",
-  contextLines: 3,
-  lineOffset: 0
-};
-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 = (0, _react.useMemo)(() => createDynamicStyles(theme, scrollEnabled), [theme, scrollEnabled]);
-  const diffComputeOptions = (0, _react.useMemo)(() => ({
-    compareMethod: options.compareMethod,
-    disableWordDiff: options.disableWordDiff,
-    showDiffOnly: options.showDiffOnly,
-    contextLines: options.contextLines
-  }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
-
-  // A JSON-encoded string is diffed decoded, or its one real change reads as
-  // one unreadable escaped line. Everything downstream — the line diff, the
-  // timestamp scan — works off the decoded pair.
-  const pair = (0, _react.useMemo)(() => (0, _jsonStringValue.decodeJsonStringPair)(oldValue, newValue), [oldValue, newValue]);
-  const lineDiffs = (0, _react.useMemo)(() => (0, _lineDiff.computeLineDiff)(pair.left, pair.right, diffComputeOptions), [pair, diffComputeOptions]);
-
-  // One pass for the summary instead of three .filter() calls per render.
-  const summary = (0, _react.useMemo)(() => {
-    let added = 0;
-    let removed = 0;
-    let modified = 0;
-    for (const d of lineDiffs) {
-      if (d.type === _lineDiff.DiffType.ADDED) added++;else if (d.type === _lineDiff.DiffType.REMOVED) removed++;else if (d.type === _lineDiff.DiffType.MODIFIED) modified++;
-    }
-    return {
-      added,
-      removed,
-      modified
-    };
-  }, [lineDiffs]);
-
-  // Detection walks at most one object level, but it runs on every render of
-  // a diff that may hold thousands of lines — keep it on the value identities.
-  const timestampDeltas = (0, _react.useMemo)(() => (0, _timestampDiff.describeTimestampDeltas)(pair.left, pair.right), [pair]);
-
-  // 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] = (0, _react.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 = (0, _react.useRef)(false);
-  (0, _react.useEffect)(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
-      return;
-    }
-    setExpandedFolds(new Set());
-  }, [oldValue, newValue]);
-  const items = (0, _react.useMemo)(() => buildSplitItems(lineDiffs, expandedFolds), [lineDiffs, expandedFolds]);
-  const toggleFold = (0, _react.useCallback)(foldId => {
-    setExpandedFolds(prev => {
-      const next = new Set(prev);
-      if (next.has(foldId)) next.delete(foldId);else next.add(foldId);
-      return next;
-    });
-  }, []);
-  const keyExtractor = (0, _react.useCallback)(item => item.kind === "row" ? `r:${item.diffIndex}` : `f:${item.foldId}`, []);
-  const renderSplitItem = (0, _react.useCallback)(item => {
-    if (item.kind === "fold") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FoldHeader, {
-        foldId: item.foldId,
-        count: item.count,
-        expanded: item.expanded,
-        theme: theme,
-        styles: dynamicStyles,
-        onToggle: toggleFold
-      });
-    }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffRow, {
-      diff: item.diff,
-      showSeparator: false,
-      theme: theme,
-      options: options,
-      styles: dynamicStyles
-    });
-  }, [theme, options, dynamicStyles, toggleFold]);
-  const renderItem = (0, _react.useCallback)(({
-    item
-  }) => renderSplitItem(item), [renderSplitItem]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: dynamicStyles.themeBadge,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: dynamicStyles.themeName,
-        children: theme.name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: dynamicStyles.themeDescription,
-        children: theme.description
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: dynamicStyles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dynamicStyles.headerLeft,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: dynamicStyles.headerTitle,
-          children: "PREV"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dynamicStyles.divider
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: dynamicStyles.headerRight,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: dynamicStyles.headerTitle,
-          children: "CUR"
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DiffSummary.DiffSummary, {
-      added: summary.added,
-      removed: summary.removed,
-      modified: summary.modified,
-      theme: theme
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsonStringNotice.JsonStringNotice, {
-      visible: pair.decoded,
-      theme: theme
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimestampDeltaBar.TimestampDeltaBar, {
-      deltas: timestampDeltas,
-      theme: theme
-    }), lineDiffs.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: dynamicStyles.emptyState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: dynamicStyles.emptyText,
-        children: options.showDiffOnly ? "No differences found" : "No content to display"
-      })
-    }) : scrollEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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).
-    (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: dynamicStyles.scrollContent,
-      children: items.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.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 !== _lineDiff.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__*/(0, _react.memo)(function FoldHeader({
-  foldId,
-  count,
-  expanded,
-  theme,
-  styles,
-  onToggle
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    style: [styles.foldHeader, {
-      backgroundColor: theme.separatorBackground
-    }],
-    onPress: () => onToggle(foldId),
-    activeOpacity: 0.7,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _react.memo)(function DiffRow({
-  diff,
-  showSeparator,
-  theme,
-  options,
-  styles
-}) {
-  const isRemoved = diff.type === _lineDiff.DiffType.REMOVED;
-  const isAdded = diff.type === _lineDiff.DiffType.ADDED;
-  const isModified = diff.type === _lineDiff.DiffType.MODIFIED;
-  const isDefault = diff.type === _lineDiff.DiffType.DEFAULT;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [showSeparator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.separator,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.separatorText,
-        children: "\u2022 \u2022 \u2022"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.leftSide,
-        children: isRemoved || isModified || isDefault ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LineSide, {
-          lineNumber: diff.leftLineNumber,
-          content: diff.leftContent,
-          type: isModified ? _lineDiff.DiffType.REMOVED : diff.type,
-          marker: isRemoved || isModified ? "-" : " ",
-          theme: theme,
-          options: options,
-          styles: styles
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyLineSide, {
-          options: options,
-          styles: styles
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.centerDivider
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.rightSide,
-        children: isAdded || isModified || isDefault ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LineSide, {
-          lineNumber: diff.rightLineNumber,
-          content: diff.rightContent,
-          type: isModified ? _lineDiff.DiffType.ADDED : diff.type,
-          marker: isAdded || isModified ? "+" : " ",
-          theme: theme,
-          options: options,
-          styles: styles
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyLineSide, {
-          options: options,
-          styles: styles
-        })
-      })]
-    })]
-  });
-});
-function LineSide({
-  lineNumber,
-  content,
-  type,
-  marker,
-  theme,
-  options,
-  styles
-}) {
-  const colors = getDiffColors(type, theme);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [!options.hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.gutter, {
-        backgroundColor: theme.lineNumberBackground
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.lineNumber,
-        children: lineNumber || " "
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.marker, {
-        backgroundColor: colors.markerBg
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.markerText, {
-          color: theme.markerText
-        }],
-        children: marker
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.contentCell, {
-        backgroundColor: colors.background
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.content, {
-          color: colors.text
-        }],
-        children: Array.isArray(content) ? content.map((word, idx) => {
-          let backgroundColor = "transparent";
-          if (word.type === _lineDiff.DiffType.ADDED) {
-            backgroundColor = theme.addedWordHighlight;
-          } else if (word.type === _lineDiff.DiffType.REMOVED) {
-            backgroundColor = theme.removedWordHighlight;
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.wordDiff, {
-              backgroundColor
-            }],
-            children: word.value
-          }, idx);
-        }) : content || " "
-      })
-    })]
-  });
-}
-function EmptyLineSide({
-  options,
-  styles
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [!options.hideLineNumbers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.gutter, styles.emptyGutter],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.lineNumber,
-        children: " "
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.marker, styles.emptyMarker],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.markerText,
-        children: " "
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.contentCell, styles.emptyContent],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.content,
-        children: " "
-      })
-    })]
-  });
-}
-function getDiffColors(type, theme) {
-  switch (type) {
-    case _lineDiff.DiffType.ADDED:
-      return {
-        background: theme.addedBackground,
-        text: theme.addedText,
-        markerBg: theme.markerAddedBackground
-      };
-    case _lineDiff.DiffType.REMOVED:
-      return {
-        background: theme.removedBackground,
-        text: theme.removedText,
-        markerBg: theme.markerRemovedBackground
-      };
-    case _lineDiff.DiffType.DEFAULT:
-    default:
-      return {
-        background: theme.unchangedBackground,
-        text: theme.unchangedText,
-        markerBg: "transparent"
-      };
-  }
-}
-
-// Create dynamic styles based on theme
-function createDynamicStyles(theme, scrollEnabled) {
-  return _reactNative.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: _fonts.monoFont,
-      letterSpacing: 0.5
-    },
-    themeDescription: {
-      fontSize: 10,
-      color: theme.unchangedText,
-      fontFamily: _fonts.monoFont,
-      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: _fonts.monoFont,
-      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: _fonts.monoFont,
-      color: theme.lineNumberText
-    },
-    marker: {
-      width: 20,
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    emptyMarker: {
-      backgroundColor: theme.contextBackground
-    },
-    markerText: {
-      fontSize: 10,
-      fontFamily: _fonts.monoFont,
-      fontWeight: "600"
-    },
-    contentCell: {
-      flex: 1,
-      paddingHorizontal: 8,
-      paddingVertical: 2
-    },
-    emptyContent: {
-      backgroundColor: theme.contextBackground
-    },
-    content: {
-      fontSize: 10,
-      fontFamily: _fonts.monoFont,
-      lineHeight: 16
-    },
-    wordDiff: {
-      fontSize: 10,
-      fontFamily: _fonts.monoFont
-    },
-    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: _fonts.monoFont,
-      fontWeight: "700"
-    },
-    separator: {
-      height: 20,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: theme.separatorBackground
-    },
-    separatorText: {
-      fontSize: 8,
-      color: theme.separatorText,
-      fontFamily: _fonts.monoFont,
-      letterSpacing: 2
-    },
-    foldHeader: {
-      paddingVertical: 6,
-      paddingHorizontal: 12,
-      alignItems: "center",
-      justifyContent: "center",
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderColor: theme.borderColor
-    },
-    foldHeaderText: {
-      fontSize: 10,
-      fontFamily: _fonts.monoFont,
-      letterSpacing: 0.5
-    },
-    emptyState: {
-      padding: 40,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    emptyText: {
-      fontSize: 11,
-      color: theme.emptyStateText,
-      fontStyle: "italic",
-      fontFamily: _fonts.monoFont
-    }
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ThemedSplitView=ThemedSplitView;var _react=require("react");var _reactNative=require("react-native");var _lineDiff=require("./lineDiff.js");var _DiffSummary=require("./DiffSummary.js");var _TimestampDeltaBar=require("./TimestampDeltaBar.js");var _timestampDiff=require("./timestampDiff.js");var _JsonStringNotice=require("./JsonStringNotice.js");var _jsonStringValue=require("./jsonStringValue.js");var _fonts=require("../ui/fonts.js");var _jsxRuntime=require("react/jsx-runtime");const DEFAULT_OPTIONS={hideLineNumbers:false,disableWordDiff:false,showDiffOnly:false,compareMethod:"words",contextLines:3,lineOffset:0};function ThemedSplitView({oldValue:e,newValue:r,theme:o,options:d=DEFAULT_OPTIONS,showThemeName:a=false,scrollEnabled:l=true}){const t=(0,_react.useMemo)(()=>createDynamicStyles(o,l),[o,l]);const n=(0,_react.useMemo)(()=>({compareMethod:d.compareMethod,disableWordDiff:d.disableWordDiff,showDiffOnly:d.showDiffOnly,contextLines:d.contextLines}),[d.compareMethod,d.disableWordDiff,d.showDiffOnly,d.contextLines]);const i=(0,_react.useMemo)(()=>(0,_jsonStringValue.decodeJsonStringPair)(e,r),[e,r]);const c=(0,_react.useMemo)(()=>(0,_lineDiff.computeLineDiff)(i.left,i.right,n),[i,n]);const f=(0,_react.useMemo)(()=>{let s=0;let g=0;let u=0;for(const m of c){if(m.type===_lineDiff.DiffType.ADDED)s++;else if(m.type===_lineDiff.DiffType.REMOVED)g++;else if(m.type===_lineDiff.DiffType.MODIFIED)u++}return{added:s,removed:g,modified:u}},[c]);const x=(0,_react.useMemo)(()=>(0,_timestampDiff.describeTimestampDeltas)(i.left,i.right),[i]);const[y,h]=(0,_react.useState)(()=>new Set);const D=(0,_react.useRef)(false);(0,_react.useEffect)(()=>{if(!D.current){D.current=true;return}h(new Set)},[e,r]);const T=(0,_react.useMemo)(()=>buildSplitItems(c,y),[c,y]);const k=(0,_react.useCallback)(s=>{h(g=>{const u=new Set(g);if(u.has(s))u.delete(s);else u.add(s);return u})},[]);const b=(0,_react.useCallback)(s=>s.kind==="row"?`r:${s.diffIndex}`:`f:${s.foldId}`,[]);const p=(0,_react.useCallback)(s=>{if(s.kind==="fold"){return(0,_jsxRuntime.jsx)(FoldHeader,{foldId:s.foldId,count:s.count,expanded:s.expanded,theme:o,styles:t,onToggle:k})}return(0,_jsxRuntime.jsx)(DiffRow,{diff:s.diff,showSeparator:false,theme:o,options:d,styles:t})},[o,d,t,k]);const j=(0,_react.useCallback)(({item:s})=>p(s),[p]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[t.container,o.glowColor&&{shadowColor:o.glowColor,shadowOffset:{width:0,height:0},shadowOpacity:o.neonIntensity&&o.neonIntensity>.7?.5:o.neonIntensity&&o.neonIntensity>.3?.3:.1,shadowRadius:o.neonIntensity&&o.neonIntensity>.7?10:o.neonIntensity&&o.neonIntensity>.3?5:2}],children:[a&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:t.themeBadge,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:t.themeName,children:o.name}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:t.themeDescription,children:o.description})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:t.header,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.headerLeft,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:t.headerTitle,children:"PREV"})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.divider}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.headerRight,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:t.headerTitle,children:"CUR"})})]}),(0,_jsxRuntime.jsx)(_DiffSummary.DiffSummary,{added:f.added,removed:f.removed,modified:f.modified,theme:o}),(0,_jsxRuntime.jsx)(_JsonStringNotice.JsonStringNotice,{visible:i.decoded,theme:o}),(0,_jsxRuntime.jsx)(_TimestampDeltaBar.TimestampDeltaBar,{deltas:x,theme:o}),c.length===0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.emptyState,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:t.emptyText,children:d.showDiffOnly?"No differences found":"No content to display"})}):l?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{style:t.scrollView,contentContainerStyle:t.scrollContent,data:T,renderItem:j,keyExtractor:b,showsVerticalScrollIndicator:false,initialNumToRender:20,maxToRenderPerBatch:20,windowSize:7,removeClippedSubviews:true}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:t.scrollContent,children:T.map(s=>(0,_jsxRuntime.jsx)(_react.Fragment,{children:p(s)},b(s)))})]})}const CONTEXT_LINES=3;const MIN_FOLD_SIZE=4;function buildSplitItems(e,r){const o=e.length;if(o===0)return[];const d=new Array(o).fill(false);for(let n=0;n<o;n++){if(e[n].type!==_lineDiff.DiffType.DEFAULT){const i=Math.max(0,n-CONTEXT_LINES);const c=Math.min(o-1,n+CONTEXT_LINES);for(let f=i;f<=c;f++)d[f]=true}}const a=[];let l=0;let t=0;while(t<o){if(d[t]){a.push({kind:"row",diff:e[t],diffIndex:t});t++;continue}let n=t;while(n<o&&!d[n])n++;const i=n-t;if(i<MIN_FOLD_SIZE){for(let c=t;c<n;c++){a.push({kind:"row",diff:e[c],diffIndex:c})}}else{const c=l++;const f=r.has(c);a.push({kind:"fold",foldId:c,count:i,expanded:f});if(f){for(let x=t;x<n;x++){a.push({kind:"row",diff:e[x],diffIndex:x})}}}t=n}return a}const FoldHeader=(0,_react.memo)(function e({foldId:r,count:o,expanded:d,theme:a,styles:l,onToggle:t}){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[l.foldHeader,{backgroundColor:a.separatorBackground}],onPress:()=>t(r),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[l.foldHeaderText,{color:a.separatorText}],children:d?`\u25BC  ${o} unchanged line${o===1?"":"s"}  \u2014  tap to hide`:`\u25B6  ${o} unchanged line${o===1?"":"s"}  \u2014  tap to expand`})})});const DiffRow=(0,_react.memo)(function e({diff:r,showSeparator:o,theme:d,options:a,styles:l}){const t=r.type===_lineDiff.DiffType.REMOVED;const n=r.type===_lineDiff.DiffType.ADDED;const i=r.type===_lineDiff.DiffType.MODIFIED;const c=r.type===_lineDiff.DiffType.DEFAULT;return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:l.separator,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:l.separatorText,children:"\u2022 \u2022 \u2022"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:l.row,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:l.leftSide,children:t||i||c?(0,_jsxRuntime.jsx)(LineSide,{lineNumber:r.leftLineNumber,content:r.leftContent,type:i?_lineDiff.DiffType.REMOVED:r.type,marker:t||i?"-":" ",theme:d,options:a,styles:l}):(0,_jsxRuntime.jsx)(EmptyLineSide,{options:a,styles:l})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:l.centerDivider}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:l.rightSide,children:n||i||c?(0,_jsxRuntime.jsx)(LineSide,{lineNumber:r.rightLineNumber,content:r.rightContent,type:i?_lineDiff.DiffType.ADDED:r.type,marker:n||i?"+":" ",theme:d,options:a,styles:l}):(0,_jsxRuntime.jsx)(EmptyLineSide,{options:a,styles:l})})]})]})});function LineSide({lineNumber:e,content:r,type:o,marker:d,theme:a,options:l,styles:t}){const n=getDiffColors(o,a);return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[!l.hideLineNumbers&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[t.gutter,{backgroundColor:a.lineNumberBackground}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:t.lineNumber,children:e||" "})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[t.marker,{backgroundColor:n.markerBg}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[t.markerText,{color:a.markerText}],children:d})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[t.contentCell,{backgroundColor:n.background}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[t.content,{color:n.text}],children:Array.isArray(r)?r.map((i,c)=>{let f="transparent";if(i.type===_lineDiff.DiffType.ADDED){f=a.addedWordHighlight}else if(i.type===_lineDiff.DiffType.REMOVED){f=a.removedWordHighlight}return(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[t.wordDiff,{backgroundColor:f}],children:i.value},c)}):r||" "})})]})}function EmptyLineSide({options:e,styles:r}){return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[!e.hideLineNumbers&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[r.gutter,r.emptyGutter],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:r.lineNumber,children:" "})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[r.marker,r.emptyMarker],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:r.markerText,children:" "})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[r.contentCell,r.emptyContent],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:r.content,children:" "})})]})}function getDiffColors(e,r){switch(e){case _lineDiff.DiffType.ADDED:return{background:r.addedBackground,text:r.addedText,markerBg:r.markerAddedBackground};case _lineDiff.DiffType.REMOVED:return{background:r.removedBackground,text:r.removedText,markerBg:r.markerRemovedBackground};case _lineDiff.DiffType.DEFAULT:default:return{background:r.unchangedBackground,text:r.unchangedText,markerBg:"transparent"}}}function createDynamicStyles(e,r){return _reactNative.StyleSheet.create({container:{...r?{height:400}:null,backgroundColor:e.background,borderRadius:8,overflow:"hidden",borderWidth:1,borderColor:e.borderColor},themeBadge:{backgroundColor:e.panelBackground,paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:e.borderColor},themeName:{fontSize:12,fontWeight:"700",color:e.accentColor||e.unchangedText,fontFamily:_fonts.monoFont,letterSpacing:.5},themeDescription:{fontSize:10,color:e.unchangedText,fontFamily:_fonts.monoFont,marginTop:2,opacity:.8},header:{flexDirection:"row",backgroundColor:e.headerBackground,borderBottomWidth:1,borderBottomColor:e.borderColor},headerLeft:{flex:1,paddingVertical:8,paddingHorizontal:12},headerRight:{flex:1,paddingVertical:8,paddingHorizontal:12},headerTitle:{fontSize:10,fontWeight:"700",color:e.accentColor||e.unchangedText,fontFamily:_fonts.monoFont,letterSpacing:.5,textTransform:"uppercase"},divider:{width:1,backgroundColor:e.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:e.dividerColor},gutter:{width:35,paddingHorizontal:4,justifyContent:"center",alignItems:"flex-end",backgroundColor:e.lineNumberBackground,borderRightWidth:1,borderRightColor:e.lineNumberBorder},emptyGutter:{backgroundColor:e.contextBackground},lineNumber:{fontSize:9,fontFamily:_fonts.monoFont,color:e.lineNumberText},marker:{width:20,justifyContent:"center",alignItems:"center"},emptyMarker:{backgroundColor:e.contextBackground},markerText:{fontSize:10,fontFamily:_fonts.monoFont,fontWeight:"600"},contentCell:{flex:1,paddingHorizontal:8,paddingVertical:2},emptyContent:{backgroundColor:e.contextBackground},content:{fontSize:10,fontFamily:_fonts.monoFont,lineHeight:16},wordDiff:{fontSize:10,fontFamily:_fonts.monoFont},summaryBar:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:16,paddingVertical:6,backgroundColor:e.summaryBackground,borderTopWidth:1,borderTopColor:e.borderColor},summaryItem:{flexDirection:"row",alignItems:"center"},summaryText:{fontSize:10,fontFamily:_fonts.monoFont,fontWeight:"700"},separator:{height:20,justifyContent:"center",alignItems:"center",backgroundColor:e.separatorBackground},separatorText:{fontSize:8,color:e.separatorText,fontFamily:_fonts.monoFont,letterSpacing:2},foldHeader:{paddingVertical:6,paddingHorizontal:12,alignItems:"center",justifyContent:"center",borderTopWidth:1,borderBottomWidth:1,borderColor:e.borderColor},foldHeaderText:{fontSize:10,fontFamily:_fonts.monoFont,letterSpacing:.5},emptyState:{padding:40,alignItems:"center",justifyContent:"center"},emptyText:{fontSize:11,color:e.emptyStateText,fontStyle:"italic",fontFamily:_fonts.monoFont}})}