@buoy-gg/storage 1.7.2

package/lib/module/storage/components/DiffViewer/DiffOptionsPanel.js

@@ -0,0 +1,352 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity, Switch } from "react-native";
+import { macOSColors, Settings, Hash, FileText, Filter } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COMPARE_METHODS = [{
+  id: "chars",
+  label: "Chars",
+  description: "Shows every single character change. Best for spotting typos or small edits in strings."
+}, {
+  id: "words",
+  label: "Words",
+  description: "Highlights changed words while preserving context. Default mode, ideal for most text changes."
+}, {
+  id: "lines",
+  label: "Lines",
+  description: "Shows entire line as changed without word-level detail. Good for completely rewritten lines."
+}, {
+  id: "trimmedLines",
+  label: "Trim",
+  description: "Ignores leading/trailing spaces when comparing. Useful when indentation changes."
+}];
+const CONTEXT_OPTIONS = [0, 1, 3, 5, 10];
+export function DiffOptionsPanel({
+  options,
+  onOptionsChange,
+  isExpanded,
+  onToggleExpanded
+}) {
+  const updateOption = (key, value) => {
+    onOptionsChange({
+      ...options,
+      [key]: value
+    });
+  };
+
+  // Check if any non-default options are active
+  const hasActiveFilters = options.hideLineNumbers || options.disableWordDiff || options.showDiffOnly || options.compareMethod !== "words";
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.toggleButton,
+      onPress: onToggleExpanded,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/_jsx(Settings, {
+        size: 12,
+        color: macOSColors.semantic.info
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.toggleText,
+        children: "Options"
+      }), hasActiveFilters && /*#__PURE__*/_jsx(View, {
+        style: styles.activeIndicator,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.activeIndicatorText,
+          children: [options.hideLineNumbers && "No#", options.disableWordDiff && "NoWord", options.showDiffOnly && `Diff${options.contextLines}`, options.compareMethod !== "words" && options.compareMethod].filter(Boolean).join(" ")
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.toggleIndicator,
+        children: isExpanded ? "▼" : "▶"
+      })]
+    }), isExpanded && /*#__PURE__*/_jsxs(View, {
+      style: styles.optionsContent,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "DISPLAY"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.optionContainer,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.option,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.optionLeft,
+              children: [/*#__PURE__*/_jsx(Hash, {
+                size: 11,
+                color: macOSColors.text.secondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.optionLabel,
+                children: "Line Numbers"
+              })]
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: !options.hideLineNumbers,
+              onValueChange: value => updateOption("hideLineNumbers", !value),
+              trackColor: {
+                false: macOSColors.border.default,
+                true: macOSColors.semantic.success + "60"
+              },
+              thumbColor: !options.hideLineNumbers ? macOSColors.semantic.success : macOSColors.text.muted,
+              style: styles.switch
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.optionDescription,
+            children: !options.hideLineNumbers ? "Shows line numbers for easier navigation and reference" : "Line numbers hidden for cleaner view"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.optionContainer,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.option,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.optionLeft,
+              children: [/*#__PURE__*/_jsx(FileText, {
+                size: 11,
+                color: macOSColors.text.secondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.optionLabel,
+                children: "Word Diff"
+              })]
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: !options.disableWordDiff,
+              onValueChange: value => updateOption("disableWordDiff", !value),
+              trackColor: {
+                false: macOSColors.border.default,
+                true: macOSColors.semantic.success + "60"
+              },
+              thumbColor: !options.disableWordDiff ? macOSColors.semantic.success : macOSColors.text.muted,
+              style: styles.switch
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.optionDescription,
+            children: !options.disableWordDiff ? "Highlights specific words/characters that changed within modified lines" : "Shows entire lines as changed without detailed highlighting"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.optionContainer,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.option,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.optionLeft,
+              children: [/*#__PURE__*/_jsx(Filter, {
+                size: 11,
+                color: macOSColors.text.secondary
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.optionLabel,
+                children: "Diff Only"
+              })]
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: options.showDiffOnly,
+              onValueChange: value => updateOption("showDiffOnly", value),
+              trackColor: {
+                false: macOSColors.border.default,
+                true: macOSColors.semantic.success + "60"
+              },
+              thumbColor: options.showDiffOnly ? macOSColors.semantic.success : macOSColors.text.muted,
+              style: styles.switch
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.optionDescription,
+            children: options.showDiffOnly ? `Shows only changed lines with ${options.contextLines} lines of context around them` : "Shows complete content with all lines visible"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "COMPARE METHOD"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.methodButtons,
+          children: COMPARE_METHODS.map(method => /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.methodButton, options.compareMethod === method.id && styles.methodButtonActive],
+            onPress: () => updateOption("compareMethod", method.id),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.methodButtonText, options.compareMethod === method.id && styles.methodButtonTextActive],
+              children: method.label
+            })
+          }, method.id))
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.methodDescription,
+          children: COMPARE_METHODS.find(m => m.id === options.compareMethod)?.description
+        })]
+      }), options.showDiffOnly && /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: "CONTEXT LINES"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.contextButtons,
+          children: CONTEXT_OPTIONS.map(lines => /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.contextButton, options.contextLines === lines && styles.contextButtonActive],
+            onPress: () => updateOption("contextLines", lines),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.contextButtonText, options.contextLines === lines && styles.contextButtonTextActive],
+              children: lines
+            })
+          }, lines))
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.contextDescription,
+          children: options.contextLines === 0 ? "Shows only the exact lines that changed with no surrounding context" : `Shows ${options.contextLines} unchanged line${options.contextLines === 1 ? "" : "s"} before and after each change for context`
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8
+  },
+  toggleButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: macOSColors.background.card,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    gap: 6
+  },
+  toggleText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: macOSColors.semantic.info,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  toggleIndicator: {
+    fontSize: 8,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  optionsContent: {
+    marginTop: 8,
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 6,
+    padding: 12,
+    gap: 16
+  },
+  section: {
+    gap: 8
+  },
+  sectionTitle: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: macOSColors.semantic.info,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 4
+  },
+  optionContainer: {
+    marginBottom: 12
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 4
+  },
+  optionLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  optionLabel: {
+    fontSize: 11,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  optionDescription: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    marginTop: 4,
+    marginLeft: 19,
+    lineHeight: 12
+  },
+  switch: {
+    transform: [{
+      scaleX: 0.8
+    }, {
+      scaleY: 0.8
+    }]
+  },
+  methodButtons: {
+    flexDirection: "row",
+    gap: 4,
+    flexWrap: "wrap"
+  },
+  methodButton: {
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  methodButtonActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "40"
+  },
+  methodButtonText: {
+    fontSize: 9,
+    fontFamily: "monospace",
+    color: macOSColors.text.muted,
+    fontWeight: "600"
+  },
+  methodButtonTextActive: {
+    color: macOSColors.semantic.info
+  },
+  methodDescription: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    marginTop: 8,
+    lineHeight: 12
+  },
+  contextButtons: {
+    flexDirection: "row",
+    gap: 6
+  },
+  contextButton: {
+    width: 32,
+    height: 28,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  contextButtonActive: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    borderColor: macOSColors.semantic.warning + "40"
+  },
+  contextButtonText: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    color: macOSColors.text.muted,
+    fontWeight: "600"
+  },
+  contextButtonTextActive: {
+    color: macOSColors.semantic.warning
+  },
+  contextDescription: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace",
+    marginTop: 8,
+    lineHeight: 12
+  },
+  activeIndicator: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3,
+    marginLeft: "auto",
+    marginRight: 4
+  },
+  activeIndicatorText: {
+    fontSize: 8,
+    fontFamily: "monospace",
+    color: macOSColors.semantic.warning,
+    fontWeight: "600"
+  }
+});

package/lib/module/storage/components/DiffViewer/TreeDiffViewer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { gameUIColors } from "@buoy-gg/shared-ui";
+import { TreeDiffViewer as SharedTreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TreeDiffViewer({
+  oldValue,
+  newValue
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsx(SharedTreeDiffViewer, {
+      oldValue: oldValue,
+      newValue: newValue,
+      theme: "dark"
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: gameUIColors.background
+  }
+});

package/lib/module/storage/components/DiffViewer/components/DiffSummary.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DiffSummary({
+  added,
+  removed,
+  modified,
+  theme,
+  style
+}) {
+  const hasChanges = added > 0 || removed > 0 || modified > 0;
+  if (!hasChanges) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }, style],
+    children: [added > 0 && /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, {
+        backgroundColor: theme.addedBackground
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.icon, {
+          color: theme.summaryAddedText
+        }],
+        children: "+"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.count, {
+          color: theme.summaryAddedText
+        }],
+        children: added
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: theme.summaryAddedText
+        }],
+        children: "new"
+      })]
+    }), removed > 0 && /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, {
+        backgroundColor: theme.removedBackground
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.icon, {
+          color: theme.summaryRemovedText
+        }],
+        children: "\u2212"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.count, {
+          color: theme.summaryRemovedText
+        }],
+        children: removed
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: theme.summaryRemovedText
+        }],
+        children: "gone"
+      })]
+    }), modified > 0 && /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, {
+        backgroundColor: theme.modifiedBackground
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.icon, {
+          color: theme.summaryModifiedText
+        }],
+        children: "\u2248"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.count, {
+          color: theme.summaryModifiedText
+        }],
+        children: modified
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: theme.summaryModifiedText
+        }],
+        children: "modified"
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderTopWidth: 1
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  icon: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    fontWeight: "700"
+  },
+  count: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  label: {
+    fontSize: 9,
+    fontFamily: "monospace",
+    opacity: 0.9
+  }
+});