@buoy-gg/shared-ui 1.7.2

package/lib/module/dataViewer/DiffSummary.js

@@ -0,0 +1,128 @@
+"use strict";
+
+/**
+ * DiffSummary
+ *
+ * Displays a summary bar showing counts of added, removed, and modified lines.
+ * Used by SplitDiffViewer to show diff statistics.
+ */
+
+import React, { memo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DiffSummary displays a summary bar showing diff statistics.
+ */
+export const DiffSummary = /*#__PURE__*/memo(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
+  }
+});

package/lib/module/dataViewer/IndentGuides.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import { memo, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { gameUIColors } from "../ui/gameUI/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const INDENT_WIDTH = 10; // Width per indent level
+const LINE_COLOR = gameUIColors.primary + "40"; // More visible line color (25% opacity)
+const ACTIVE_LINE_COLOR = gameUIColors.primary + "66"; // Highlighted line color (40% opacity)
+
+/**
+ * IndentGuides component that renders VS Code-style indent guide lines
+ * Shows vertical lines for each indent level and horizontal connectors
+ */
+export const IndentGuides = /*#__PURE__*/memo(({
+  depth,
+  isLastChild,
+  isExpanded,
+  hasChildren,
+  parentHasMoreSiblings = [],
+  activeDepth = -1,
+  itemHeight
+}) => {
+  const guides = useMemo(() => {
+    const elements = [];
+
+    // Render vertical guides for parent levels that continue through this item
+    for (let level = 1; level < depth; level++) {
+      const isActive = level === activeDepth;
+      // Show line if parent at this level has more siblings
+      const shouldShowLine = parentHasMoreSiblings[level - 1];
+      if (shouldShowLine) {
+        // Vertical line that passes through this item from parent levels
+        elements.push(/*#__PURE__*/_jsx(View, {
+          style: [styles.verticalLine, {
+            left: (level - 1) * INDENT_WIDTH - 0.5,
+            backgroundColor: isActive ? ACTIVE_LINE_COLOR : LINE_COLOR,
+            height: itemHeight
+          }]
+        }, `v-${level}`));
+      }
+    }
+
+    // Vertical line for the current item's level
+    if (depth > 0) {
+      // For last child without expansion, line goes to the middle
+      // For expanded items or items with siblings below, line goes through entire height
+      const lineHeight = isLastChild && !isExpanded ? itemHeight / 2 - 1 : itemHeight;
+      elements.push(/*#__PURE__*/_jsx(View, {
+        style: [styles.verticalLine, {
+          left: (depth - 1) * INDENT_WIDTH - 0.5,
+          backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR,
+          height: lineHeight
+        }]
+      }, `v-current`));
+
+      // Add a subtle L-shaped corner for last children that aren't expanded
+      if (isLastChild && !isExpanded) {
+        elements.push(/*#__PURE__*/_jsx(View, {
+          style: [styles.horizontalLine, {
+            left: (depth - 1) * INDENT_WIDTH,
+            top: itemHeight / 2 - 1,
+            width: INDENT_WIDTH / 2,
+            backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR
+          }]
+        }, "h-corner"));
+      }
+
+      // For expanded items, add a small horizontal connector
+      if (isExpanded && hasChildren) {
+        elements.push(/*#__PURE__*/_jsx(View, {
+          style: [styles.horizontalLine, {
+            left: (depth - 1) * INDENT_WIDTH,
+            top: itemHeight / 2 - 1,
+            width: INDENT_WIDTH / 2,
+            backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR
+          }]
+        }, "h-expand-connector"));
+      }
+    }
+
+    // Vertical line extending down for expanded items with children
+    if (hasChildren && isExpanded) {
+      elements.push(/*#__PURE__*/_jsx(View, {
+        style: [styles.verticalLine, {
+          left: depth * INDENT_WIDTH - 0.5,
+          top: itemHeight / 2,
+          height: itemHeight / 2 + 1,
+          // Extend slightly to connect better
+          backgroundColor: activeDepth === depth ? ACTIVE_LINE_COLOR : LINE_COLOR
+        }]
+      }, "v-children"));
+    }
+    return elements;
+  }, [depth, isLastChild, isExpanded, hasChildren, parentHasMoreSiblings, activeDepth, itemHeight]);
+  if (depth === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    pointerEvents: "none",
+    children: guides
+  });
+});
+IndentGuides.displayName = "IndentGuides";
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  verticalLine: {
+    position: "absolute",
+    width: 1.5,
+    // Slightly thicker for better visibility
+    top: 0
+  },
+  horizontalLine: {
+    position: "absolute",
+    height: 1.5 // Slightly thicker for better visibility
+  }
+});

package/lib/module/dataViewer/IndentGuidesOverlay.js

@@ -0,0 +1,99 @@
+"use strict";
+
+import React, { memo, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { gameUIColors } from "../ui/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const NORMAL_ALPHA = "4D"; // ~30%
+const ACTIVE_ALPHA = "80"; // ~50%
+export const IndentGuidesOverlay = /*#__PURE__*/memo(({
+  items,
+  visibleRange,
+  itemHeight,
+  indentWidth,
+  activeDepth = -1
+}) => {
+  const columns = useMemo(() => {
+    const start = Math.max(0, visibleRange.start);
+    const end = Math.min(items.length - 1, visibleRange.end);
+    if (start > end || items.length === 0) return [];
+
+    // Find max depth in visible range
+    let maxDepth = 0;
+    for (let i = start; i <= end; i++) {
+      const d = items[i]?.depth ?? 0;
+      if (d > maxDepth) maxDepth = d;
+    }
+    const results = [];
+    for (let depth = 1; depth <= maxDepth; depth++) {
+      const leftTarget = (depth - 0.5) * indentWidth; // center of indent column
+      const left = Math.round(leftTarget) + 0.5; // snap for crisp 1px
+      const segments = [];
+      let segStart = -1;
+      let segEnd = -1;
+      for (let i = start; i <= end; i++) {
+        const item = items[i];
+        // Draw a column for any row that reaches this depth
+        // i.e. all rows with depth >= current column depth
+        const showAtThisDepth = (item?.depth ?? 0) >= depth;
+        if (showAtThisDepth) {
+          if (segStart === -1) segStart = i;
+          segEnd = i;
+        } else if (segStart !== -1) {
+          segments.push({
+            startIndex: segStart,
+            endIndex: segEnd
+          });
+          segStart = -1;
+          segEnd = -1;
+        }
+      }
+      if (segStart !== -1) {
+        segments.push({
+          startIndex: segStart,
+          endIndex: segEnd
+        });
+      }
+      if (segments.length > 0) {
+        results.push({
+          depth,
+          left,
+          segments
+        });
+      }
+    }
+    return results;
+  }, [items, visibleRange, itemHeight, indentWidth]);
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: styles.overlay,
+    children: columns.map(col => col.segments.map((seg, idx) => {
+      const top = (seg.startIndex - visibleRange.start) * itemHeight;
+      const height = (seg.endIndex - seg.startIndex + 1) * itemHeight;
+      const isActive = col.depth === activeDepth;
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.line, {
+          left: col.left,
+          top,
+          height,
+          backgroundColor: `${gameUIColors.primary}${isActive ? ACTIVE_ALPHA : NORMAL_ALPHA}`
+        }]
+      }, `${col.depth}-${idx}`);
+    }))
+  });
+});
+IndentGuidesOverlay.displayName = "IndentGuidesOverlay";
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  line: {
+    position: "absolute",
+    width: 1
+  }
+});