@buoy-gg/shared-ui 1.7.2

package/lib/module/ui/components/ValueTypeBadge.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { CheckCircle, XCircle } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ValueTypeBadge({
+  type,
+  value,
+  size = "small",
+  showIcon = false
+}) {
+  const isSmall = size === "small";
+
+  // Special handling for booleans
+  if (type === "boolean" && value !== undefined) {
+    const isTrue = value === true;
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, isTrue ? styles.trueBadge : styles.falseBadge, isSmall && styles.smallBadge],
+      children: [showIcon && (isTrue ? /*#__PURE__*/_jsx(CheckCircle, {
+        size: 10,
+        color: buoyColors.success
+      }) : /*#__PURE__*/_jsx(XCircle, {
+        size: 10,
+        color: buoyColors.error
+      })), /*#__PURE__*/_jsx(Text, {
+        style: [styles.badgeText, isTrue ? styles.trueText : styles.falseText, isSmall && styles.smallText],
+        children: isTrue ? "TRUE" : "FALSE"
+      })]
+    });
+  }
+
+  // Handling for other types - use unified teal for primitive types
+  const getTypeStyle = () => {
+    switch (type) {
+      case "string":
+      case "number":
+        return styles.primaryBadge;
+      case "null":
+      case "undefined":
+        return styles.mutedBadge;
+      case "object":
+      case "array":
+        return styles.secondaryBadge;
+      default:
+        return styles.defaultBadge;
+    }
+  };
+  const getTypeText = () => {
+    switch (type) {
+      case "string":
+        return "STRING";
+      case "number":
+        return "NUMBER";
+      case "null":
+        return "NULL";
+      case "undefined":
+        return "UNDEFINED";
+      case "object":
+        return "OBJECT";
+      case "array":
+        return "ARRAY";
+      default:
+        return type.toUpperCase();
+    }
+  };
+  const getTypeColor = () => {
+    switch (type) {
+      case "string":
+      case "number":
+        return buoyColors.primary;
+      case "null":
+      case "undefined":
+        return buoyColors.textMuted;
+      case "object":
+      case "array":
+        return buoyColors.textSecondary;
+      default:
+        return buoyColors.textMuted;
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, getTypeStyle(), isSmall && styles.smallBadge],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.typeText, {
+        color: getTypeColor()
+      }, isSmall && styles.smallText],
+      children: getTypeText()
+    })
+  });
+}
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  smallBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  smallText: {
+    fontSize: 9
+  },
+  typeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5
+  },
+  trueBadge: {
+    backgroundColor: buoyColors.success + "1A"
+  },
+  falseBadge: {
+    backgroundColor: buoyColors.error + "1A"
+  },
+  trueText: {
+    color: buoyColors.success
+  },
+  falseText: {
+    color: buoyColors.error
+  },
+  primaryBadge: {
+    backgroundColor: buoyColors.primary + "1A"
+  },
+  secondaryBadge: {
+    backgroundColor: buoyColors.textSecondary + "1A"
+  },
+  mutedBadge: {
+    backgroundColor: buoyColors.textMuted + "1A"
+  },
+  defaultBadge: {
+    backgroundColor: buoyColors.textMuted + "1A"
+  }
+});

package/lib/module/ui/components/WindowControls.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { X, Minus, DockBottom, FloatWindow } from "../../icons/index.js";
+
+// ============================================================================
+// Types
+// ============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Constants - macOS Style Window Controls
+// ============================================================================
+
+// macOS window control colors (matching exact macOS appearance)
+const COLORS = {
+  close: "#FF5F57",
+  // Red - close button
+  minimize: "#FEBC2E",
+  // Yellow - minimize button
+  toggleMode: "#28C840" // Green - expand/fullscreen button
+};
+
+// macOS-style circular button dimensions
+const BUTTON_SIZE = 12; // Small circular buttons
+const BUTTON_SPACING = 8; // Spacing between buttons
+const ICON_SIZE = 8; // Icon size inside the buttons
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * macOS-style window control buttons with Windows ordering.
+ * Circular colored buttons inspired by macOS window controls.
+ * Order (left to right): Minimize (yellow) → Expand (green) → Close (red)
+ */
+export function WindowControls({
+  onClose,
+  onMinimize,
+  onToggleMode,
+  mode
+}) {
+  // Show action-based icon: what will happen when clicked
+  // - If floating, show DockBottom (clicking will dock to bottom)
+  // - If bottomSheet, show FloatWindow (clicking will make it float)
+  const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
+  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onMinimize,
+      style: [styles.button, styles.minimizeButton],
+      activeOpacity: 0.8,
+      accessibilityLabel: "Minimize modal",
+      accessibilityRole: "button",
+      children: /*#__PURE__*/_jsx(Minus, {
+        size: ICON_SIZE,
+        color: "#7A5A00",
+        strokeWidth: 1.5
+      })
+    }), onToggleMode && /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onToggleMode,
+      style: [styles.button, styles.expandButton],
+      activeOpacity: 0.8,
+      accessibilityLabel: toggleModeLabel,
+      accessibilityRole: "button",
+      children: /*#__PURE__*/_jsx(ToggleModeIcon, {
+        size: ICON_SIZE,
+        color: "#004A1A",
+        strokeWidth: 1.5
+      })
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onClose,
+      style: [styles.button, styles.closeButton],
+      activeOpacity: 0.8,
+      accessibilityLabel: "Close modal",
+      accessibilityRole: "button",
+      children: /*#__PURE__*/_jsx(X, {
+        size: ICON_SIZE,
+        color: "#4A0000",
+        strokeWidth: 1.5
+      })
+    })]
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: BUTTON_SPACING
+  },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    // Perfectly circular
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  closeButton: {
+    backgroundColor: COLORS.close
+  },
+  minimizeButton: {
+    backgroundColor: COLORS.minimize
+  },
+  expandButton: {
+    backgroundColor: COLORS.toggleMode
+  }
+});

package/lib/module/ui/components/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+export { BackButton } from "./BackButton.js";
+export { ValueTypeBadge } from "./ValueTypeBadge.js";
+export { StorageTypeBadge } from "./StorageTypeBadge.js";
+export { CopyButton, InlineCopyButton, ToolbarCopyButton, ActionCopyButton } from "./CopyButton.js";
+export { ModalHeader } from "./ModalHeader.js";
+export { ModalHintBanner } from "./ModalHintBanner.js";
+export { ClipboardHintBanner } from "./ClipboardHintBanner.js";
+export { SectionHeader } from "./SectionHeader.js";
+export { ListItem } from "./ListItem.js";
+export { FilterSection, FilterBadge, AddFilterInput, AddFilterButton, FilterList } from "./FilterComponents.js";
+export { CompactFilterChips } from "./CompactFilterChips.js";
+export { Badge, StatusBadge, CountBadge, TypeBadge, MethodBadge } from "./Badge.js";
+export { TabSelector } from "./TabSelector.js";
+export { EventListItem } from "./EventListItem.js";
+export { StatsCard } from "./StatsCard.js";
+export { CompactRow } from "./CompactRow.js";
+export { HeaderSearchButton } from "./HeaderSearchButton.js";
+export { EmptyState, NoDataEmptyState, NoResultsEmptyState, NoSearchResultsEmptyState } from "./EmptyState.js";
+export { StatusIndicator } from "./StatusIndicator.js";
+export { TimeDisplay } from "./TimeDisplay.js";
+export { DetailView } from "./DetailView.js";
+export { DraggableHeader } from "./DraggableHeader.js";
+export { CollapsibleSection } from "./CollapsibleSection.js";
+export { DataInspector } from "./DataInspector.js";
+export { SearchBar } from "./SearchBar.js";
+export { DynamicFilterView } from "./DynamicFilterView.js";
+export { WindowControls } from "./WindowControls.js";
+export { EventStepperFooter } from "./EventStepperFooter.js";
+export { ExpandablePopover } from "./ExpandablePopover.js";
+// EventHistoryViewer components
+export { EventHistoryViewer, ViewToggleCards, DiffModeTabs, CompareBar, EventPickerModal } from "./EventHistoryViewer/index.js";

package/lib/module/ui/components/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/lib/module/ui/console/BubbleSettingsModal.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import { useCallback } from "react";
+import { ModalHeader } from "../components/ModalHeader.js";
+import { JsModal } from "../../JsModal.js";
+import { BubbleSettingsDetail } from "../../settings/index.js";
+import { devToolsStorageKeys } from "../../storage/devToolsStorageKeys.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BubbleSettingsModal({
+  visible,
+  onClose,
+  onBack,
+  enableSharedModalDimensions = false,
+  onSettingsChange
+}) {
+  const handleModeChange = useCallback(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  if (!visible) return null;
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.bubble.settings();
+  return /*#__PURE__*/_jsx(JsModal, {
+    visible: visible,
+    onClose: onClose,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: /*#__PURE__*/_jsxs(ModalHeader, {
+        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+          onBack: onBack
+        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+          title: "Bubble Settings",
+          subtitle: "Configure visibility",
+          centered: true
+        }), /*#__PURE__*/_jsx(ModalHeader.Actions, {})]
+      })
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    children: /*#__PURE__*/_jsx(BubbleSettingsDetail, {
+      onSettingsChange: onSettingsChange
+    })
+  });
+}

package/lib/module/ui/console/ConsoleSection.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { ExpandableSectionHeader } from "../components/ExpandableSectionHeader.js";
+import { GalaxyButton } from "./GalaxyButton.js";
+
+// Stable constants moved to module scope to prevent re-renders [[memory:4875251]]
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Individual console section component following composition principles.
+ * Separates section UI rendering from business logic.
+ */
+export function ConsoleSection({
+  id: _id,
+  title,
+  subtitle,
+  icon,
+  iconColor,
+  iconBackgroundColor,
+  onPress
+}) {
+  return /*#__PURE__*/_jsx(GalaxyButton, {
+    onPress: onPress,
+    style: styles.sectionCard,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.sectionCardContent,
+      children: /*#__PURE__*/_jsx(ExpandableSectionHeader, {
+        title: title,
+        subtitle: subtitle || "",
+        icon: icon,
+        iconColor: iconColor,
+        iconBackgroundColor: iconBackgroundColor,
+        isExpanded: false,
+        onPress: onPress
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  sectionCard: {
+    marginBottom: 16 // Match ExpandableSection spacing
+  },
+  sectionCardContent: {
+    padding: 24 // Match ExpandableSection padding
+  }
+});

package/lib/module/ui/console/CyberpunkButtonOutline.js

@@ -0,0 +1,257 @@
+"use strict";
+
+import { useState, useRef } from "react";
+import { View, Pressable, Animated, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CyberpunkButtonOutline({
+  children,
+  onPress,
+  style,
+  accentColor = "#00ffff"
+}) {
+  const [isPressed, setIsPressed] = useState(false);
+  const animatedScale = useRef(new Animated.Value(1)).current;
+  const animatedOpacity = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    setIsPressed(true);
+    Animated.parallel([Animated.spring(animatedScale, {
+      toValue: 0.98,
+      useNativeDriver: true,
+      tension: 100,
+      friction: 10
+    }), Animated.timing(animatedOpacity, {
+      toValue: 1.2,
+      duration: 100,
+      useNativeDriver: true
+    })]).start();
+  };
+  const handlePressOut = () => {
+    setIsPressed(false);
+    Animated.parallel([Animated.spring(animatedScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      tension: 100,
+      friction: 10
+    }), Animated.timing(animatedOpacity, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true
+    })]).start();
+  };
+  const cornerCutSize = 15;
+  const borderWidth = isPressed ? 3 : 2.5;
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    style: style,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: {
+        position: "relative",
+        height: 80,
+        marginBottom: 12,
+        transform: [{
+          scale: animatedScale
+        }],
+        opacity: animatedOpacity
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: [styles.mainFrame, {
+          borderColor: accentColor,
+          borderWidth: borderWidth,
+          opacity: isPressed ? 1 : 0.95,
+          shadowColor: accentColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.6,
+          shadowRadius: 8
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.cornerCut, {
+            top: -borderWidth,
+            left: -borderWidth,
+            width: cornerCutSize,
+            height: cornerCutSize,
+            borderRightWidth: borderWidth,
+            borderBottomWidth: borderWidth,
+            borderRightColor: accentColor,
+            borderBottomColor: accentColor,
+            backgroundColor: style?.backgroundColor || "transparent",
+            transform: [{
+              rotate: "0deg"
+            }]
+          }]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerCut, {
+            top: -borderWidth,
+            right: -borderWidth,
+            width: cornerCutSize,
+            height: cornerCutSize,
+            borderLeftWidth: borderWidth,
+            borderBottomWidth: borderWidth,
+            borderLeftColor: accentColor,
+            borderBottomColor: accentColor,
+            backgroundColor: style?.backgroundColor || "transparent",
+            transform: [{
+              rotate: "0deg"
+            }]
+          }]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerCut, {
+            bottom: -borderWidth,
+            left: -borderWidth,
+            width: cornerCutSize,
+            height: cornerCutSize,
+            borderRightWidth: borderWidth,
+            borderTopWidth: borderWidth,
+            borderRightColor: accentColor,
+            borderTopColor: accentColor,
+            backgroundColor: style?.backgroundColor || "transparent",
+            transform: [{
+              rotate: "0deg"
+            }]
+          }]
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerCut, {
+            bottom: -borderWidth,
+            right: -borderWidth,
+            width: cornerCutSize,
+            height: cornerCutSize,
+            borderLeftWidth: borderWidth,
+            borderTopWidth: borderWidth,
+            borderLeftColor: accentColor,
+            borderTopColor: accentColor,
+            backgroundColor: style?.backgroundColor || "transparent",
+            transform: [{
+              rotate: "0deg"
+            }]
+          }]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.innerFrame, {
+          top: 3,
+          left: 3,
+          right: 3,
+          bottom: 3,
+          borderColor: accentColor,
+          borderWidth: 1.5,
+          opacity: 0.6,
+          shadowColor: accentColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: 0.4,
+          shadowRadius: 4
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          top: 5,
+          left: cornerCutSize,
+          width: 10,
+          height: 1,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          top: cornerCutSize,
+          left: 5,
+          width: 1,
+          height: 10,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          top: 5,
+          right: cornerCutSize,
+          width: 10,
+          height: 1,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          top: cornerCutSize,
+          right: 5,
+          width: 1,
+          height: 10,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          bottom: 5,
+          left: cornerCutSize,
+          width: 10,
+          height: 1,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          bottom: cornerCutSize,
+          left: 5,
+          width: 1,
+          height: 10,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          bottom: 5,
+          right: cornerCutSize,
+          width: 10,
+          height: 1,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.accentLine, {
+          bottom: cornerCutSize,
+          right: 5,
+          width: 1,
+          height: 10,
+          backgroundColor: accentColor,
+          opacity: 0.6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          paddingLeft: 35,
+          paddingRight: 25,
+          paddingVertical: 12,
+          justifyContent: "center"
+        },
+        children: children
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  mainFrame: {
+    position: "absolute",
+    top: 0,
+    left: 10,
+    right: 10,
+    bottom: 0,
+    borderRadius: 2
+  },
+  innerFrame: {
+    position: "absolute",
+    borderRadius: 2
+  },
+  cornerCut: {
+    position: "absolute"
+  },
+  accentLine: {
+    position: "absolute"
+  }
+});