@buoy-gg/shared-ui 7.0.41 → 7.0.42

package/lib/module/dataViewer/ThemedSplitView.js

@@ -1,637 +1 @@
-"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";
-import { TimestampDeltaBar } from "./TimestampDeltaBar.js";
-import { describeTimestampDeltas } from "./timestampDiff.js";
-import { JsonStringNotice } from "./JsonStringNotice.js";
-import { decodeJsonStringPair } from "./jsonStringValue.js";
-import { monoFont } from "../ui/fonts.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]);
-
-  // 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 = useMemo(() => decodeJsonStringPair(oldValue, newValue), [oldValue, newValue]);
-  const lineDiffs = useMemo(() => computeLineDiff(pair.left, pair.right, diffComputeOptions), [pair, 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]);
-
-  // 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 = useMemo(() => 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] = 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
-    }), /*#__PURE__*/_jsx(JsonStringNotice, {
-      visible: pair.decoded,
-      theme: theme
-    }), /*#__PURE__*/_jsx(TimestampDeltaBar, {
-      deltas: timestampDeltas,
-      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: monoFont,
-      letterSpacing: 0.5
-    },
-    themeDescription: {
-      fontSize: 10,
-      color: theme.unchangedText,
-      fontFamily: 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: 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: monoFont,
-      color: theme.lineNumberText
-    },
-    marker: {
-      width: 20,
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    emptyMarker: {
-      backgroundColor: theme.contextBackground
-    },
-    markerText: {
-      fontSize: 10,
-      fontFamily: monoFont,
-      fontWeight: "600"
-    },
-    contentCell: {
-      flex: 1,
-      paddingHorizontal: 8,
-      paddingVertical: 2
-    },
-    emptyContent: {
-      backgroundColor: theme.contextBackground
-    },
-    content: {
-      fontSize: 10,
-      fontFamily: monoFont,
-      lineHeight: 16
-    },
-    wordDiff: {
-      fontSize: 10,
-      fontFamily: 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: monoFont,
-      fontWeight: "700"
-    },
-    separator: {
-      height: 20,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: theme.separatorBackground
-    },
-    separatorText: {
-      fontSize: 8,
-      color: theme.separatorText,
-      fontFamily: monoFont,
-      letterSpacing: 2
-    },
-    foldHeader: {
-      paddingVertical: 6,
-      paddingHorizontal: 12,
-      alignItems: "center",
-      justifyContent: "center",
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
-      borderColor: theme.borderColor
-    },
-    foldHeaderText: {
-      fontSize: 10,
-      fontFamily: monoFont,
-      letterSpacing: 0.5
-    },
-    emptyState: {
-      padding: 40,
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    emptyText: {
-      fontSize: 11,
-      color: theme.emptyStateText,
-      fontStyle: "italic",
-      fontFamily: monoFont
-    }
-  });
-}
+"use strict";import{Fragment as C,memo as O,useCallback as S,useEffect as W,useMemo as x,useRef as H,useState as A}from"react";import{View as u,Text as m,FlatList as V,StyleSheet as j,TouchableOpacity as _}from"react-native";import{computeLineDiff as $,DiffType as g}from"./lineDiff.js";import{DiffSummary as P}from"./DiffSummary.js";import{TimestampDeltaBar as U}from"./TimestampDeltaBar.js";import{describeTimestampDeltas as G}from"./timestampDiff.js";import{JsonStringNotice as J}from"./JsonStringNotice.js";import{decodeJsonStringPair as X}from"./jsonStringValue.js";import{monoFont as y}from"../ui/fonts.js";import{jsx as o,jsxs as k}from"react/jsx-runtime";const Z={hideLineNumbers:false,disableWordDiff:false,showDiffOnly:false,compareMethod:"words",contextLines:3,lineOffset:0};export function ThemedSplitView({oldValue:e,newValue:r,theme:n,options:l=Z,showThemeName:a=false,scrollEnabled:c=true}){const t=x(()=>re(n,c),[n,c]);const i=x(()=>({compareMethod:l.compareMethod,disableWordDiff:l.disableWordDiff,showDiffOnly:l.showDiffOnly,contextLines:l.contextLines}),[l.compareMethod,l.disableWordDiff,l.showDiffOnly,l.contextLines]);const d=x(()=>X(e,r),[e,r]);const f=x(()=>$(d.left,d.right,i),[d,i]);const p=x(()=>{let s=0;let D=0;let h=0;for(const T of f){if(T.type===g.ADDED)s++;else if(T.type===g.REMOVED)D++;else if(T.type===g.MODIFIED)h++}return{added:s,removed:D,modified:h}},[f]);const b=x(()=>G(d.left,d.right),[d]);const[I,B]=A(()=>new Set);const E=H(false);W(()=>{if(!E.current){E.current=true;return}B(new Set)},[e,r]);const F=x(()=>K(f,I),[f,I]);const N=S(s=>{B(D=>{const h=new Set(D);if(h.has(s))h.delete(s);else h.add(s);return h})},[]);const L=S(s=>s.kind==="row"?`r:${s.diffIndex}`:`f:${s.foldId}`,[]);const w=S(s=>{if(s.kind==="fold"){return o(Q,{foldId:s.foldId,count:s.count,expanded:s.expanded,theme:n,styles:t,onToggle:N})}return o(Y,{diff:s.diff,showSeparator:false,theme:n,options:l,styles:t})},[n,l,t,N]);const z=S(({item:s})=>w(s),[w]);return k(u,{style:[t.container,n.glowColor&&{shadowColor:n.glowColor,shadowOffset:{width:0,height:0},shadowOpacity:n.neonIntensity&&n.neonIntensity>.7?.5:n.neonIntensity&&n.neonIntensity>.3?.3:.1,shadowRadius:n.neonIntensity&&n.neonIntensity>.7?10:n.neonIntensity&&n.neonIntensity>.3?5:2}],children:[a&&k(u,{style:t.themeBadge,children:[o(m,{style:t.themeName,children:n.name}),o(m,{style:t.themeDescription,children:n.description})]}),k(u,{style:t.header,children:[o(u,{style:t.headerLeft,children:o(m,{style:t.headerTitle,children:"PREV"})}),o(u,{style:t.divider}),o(u,{style:t.headerRight,children:o(m,{style:t.headerTitle,children:"CUR"})})]}),o(P,{added:p.added,removed:p.removed,modified:p.modified,theme:n}),o(J,{visible:d.decoded,theme:n}),o(U,{deltas:b,theme:n}),f.length===0?o(u,{style:t.emptyState,children:o(m,{style:t.emptyText,children:l.showDiffOnly?"No differences found":"No content to display"})}):c?o(V,{style:t.scrollView,contentContainerStyle:t.scrollContent,data:F,renderItem:z,keyExtractor:L,showsVerticalScrollIndicator:false,initialNumToRender:20,maxToRenderPerBatch:20,windowSize:7,removeClippedSubviews:true}):o(u,{style:t.scrollContent,children:F.map(s=>o(C,{children:w(s)},L(s)))})]})}const v=3;const q=4;function K(e,r){const n=e.length;if(n===0)return[];const l=new Array(n).fill(false);for(let i=0;i<n;i++){if(e[i].type!==g.DEFAULT){const d=Math.max(0,i-v);const f=Math.min(n-1,i+v);for(let p=d;p<=f;p++)l[p]=true}}const a=[];let c=0;let t=0;while(t<n){if(l[t]){a.push({kind:"row",diff:e[t],diffIndex:t});t++;continue}let i=t;while(i<n&&!l[i])i++;const d=i-t;if(d<q){for(let f=t;f<i;f++){a.push({kind:"row",diff:e[f],diffIndex:f})}}else{const f=c++;const p=r.has(f);a.push({kind:"fold",foldId:f,count:d,expanded:p});if(p){for(let b=t;b<i;b++){a.push({kind:"row",diff:e[b],diffIndex:b})}}}t=i}return a}const Q=O(function e({foldId:r,count:n,expanded:l,theme:a,styles:c,onToggle:t}){return o(_,{style:[c.foldHeader,{backgroundColor:a.separatorBackground}],onPress:()=>t(r),activeOpacity:.7,children:o(m,{style:[c.foldHeaderText,{color:a.separatorText}],children:l?`\u25BC  ${n} unchanged line${n===1?"":"s"}  \u2014  tap to hide`:`\u25B6  ${n} unchanged line${n===1?"":"s"}  \u2014  tap to expand`})})});const Y=O(function e({diff:r,showSeparator:n,theme:l,options:a,styles:c}){const t=r.type===g.REMOVED;const i=r.type===g.ADDED;const d=r.type===g.MODIFIED;const f=r.type===g.DEFAULT;return k(C,{children:[n&&o(u,{style:c.separator,children:o(m,{style:c.separatorText,children:"\u2022 \u2022 \u2022"})}),k(u,{style:c.row,children:[o(u,{style:c.leftSide,children:t||d||f?o(R,{lineNumber:r.leftLineNumber,content:r.leftContent,type:d?g.REMOVED:r.type,marker:t||d?"-":" ",theme:l,options:a,styles:c}):o(M,{options:a,styles:c})}),o(u,{style:c.centerDivider}),o(u,{style:c.rightSide,children:i||d||f?o(R,{lineNumber:r.rightLineNumber,content:r.rightContent,type:d?g.ADDED:r.type,marker:i||d?"+":" ",theme:l,options:a,styles:c}):o(M,{options:a,styles:c})})]})]})});function R({lineNumber:e,content:r,type:n,marker:l,theme:a,options:c,styles:t}){const i=ee(n,a);return k(C,{children:[!c.hideLineNumbers&&o(u,{style:[t.gutter,{backgroundColor:a.lineNumberBackground}],children:o(m,{style:t.lineNumber,children:e||" "})}),o(u,{style:[t.marker,{backgroundColor:i.markerBg}],children:o(m,{style:[t.markerText,{color:a.markerText}],children:l})}),o(u,{style:[t.contentCell,{backgroundColor:i.background}],children:o(m,{style:[t.content,{color:i.text}],children:Array.isArray(r)?r.map((d,f)=>{let p="transparent";if(d.type===g.ADDED){p=a.addedWordHighlight}else if(d.type===g.REMOVED){p=a.removedWordHighlight}return o(m,{style:[t.wordDiff,{backgroundColor:p}],children:d.value},f)}):r||" "})})]})}function M({options:e,styles:r}){return k(C,{children:[!e.hideLineNumbers&&o(u,{style:[r.gutter,r.emptyGutter],children:o(m,{style:r.lineNumber,children:" "})}),o(u,{style:[r.marker,r.emptyMarker],children:o(m,{style:r.markerText,children:" "})}),o(u,{style:[r.contentCell,r.emptyContent],children:o(m,{style:r.content,children:" "})})]})}function ee(e,r){switch(e){case g.ADDED:return{background:r.addedBackground,text:r.addedText,markerBg:r.markerAddedBackground};case g.REMOVED:return{background:r.removedBackground,text:r.removedText,markerBg:r.markerRemovedBackground};case g.DEFAULT:default:return{background:r.unchangedBackground,text:r.unchangedText,markerBg:"transparent"}}}function re(e,r){return j.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:y,letterSpacing:.5},themeDescription:{fontSize:10,color:e.unchangedText,fontFamily:y,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:y,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:y,color:e.lineNumberText},marker:{width:20,justifyContent:"center",alignItems:"center"},emptyMarker:{backgroundColor:e.contextBackground},markerText:{fontSize:10,fontFamily:y,fontWeight:"600"},contentCell:{flex:1,paddingHorizontal:8,paddingVertical:2},emptyContent:{backgroundColor:e.contextBackground},content:{fontSize:10,fontFamily:y,lineHeight:16},wordDiff:{fontSize:10,fontFamily:y},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:y,fontWeight:"700"},separator:{height:20,justifyContent:"center",alignItems:"center",backgroundColor:e.separatorBackground},separatorText:{fontSize:8,color:e.separatorText,fontFamily:y,letterSpacing:2},foldHeader:{paddingVertical:6,paddingHorizontal:12,alignItems:"center",justifyContent:"center",borderTopWidth:1,borderBottomWidth:1,borderColor:e.borderColor},foldHeaderText:{fontSize:10,fontFamily:y,letterSpacing:.5},emptyState:{padding:40,alignItems:"center",justifyContent:"center"},emptyText:{fontSize:11,color:e.emptyStateText,fontStyle:"italic",fontFamily:y}})}