@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValueTypeBadge = ValueTypeBadge;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.badge, isTrue ? styles.trueBadge : styles.falseBadge, isSmall && styles.smallBadge],
+      children: [showIcon && (isTrue ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CheckCircle, {
+        size: 10,
+        color: _gameUIColors.buoyColors.success
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.XCircle, {
+        size: 10,
+        color: _gameUIColors.buoyColors.error
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 _gameUIColors.buoyColors.primary;
+      case "null":
+      case "undefined":
+        return _gameUIColors.buoyColors.textMuted;
+      case "object":
+      case "array":
+        return _gameUIColors.buoyColors.textSecondary;
+      default:
+        return _gameUIColors.buoyColors.textMuted;
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.badge, getTypeStyle(), isSmall && styles.smallBadge],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.typeText, {
+        color: getTypeColor()
+      }, isSmall && styles.smallText],
+      children: getTypeText()
+    })
+  });
+}
+const styles = _reactNative.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: _gameUIColors.buoyColors.success + "1A"
+  },
+  falseBadge: {
+    backgroundColor: _gameUIColors.buoyColors.error + "1A"
+  },
+  trueText: {
+    color: _gameUIColors.buoyColors.success
+  },
+  falseText: {
+    color: _gameUIColors.buoyColors.error
+  },
+  primaryBadge: {
+    backgroundColor: _gameUIColors.buoyColors.primary + "1A"
+  },
+  secondaryBadge: {
+    backgroundColor: _gameUIColors.buoyColors.textSecondary + "1A"
+  },
+  mutedBadge: {
+    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A"
+  },
+  defaultBadge: {
+    backgroundColor: _gameUIColors.buoyColors.textMuted + "1A"
+  }
+});

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

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WindowControls = WindowControls;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// 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)
+ */
+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" ? _index.DockBottom : _index.FloatWindow;
+  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onMinimize,
+      style: [styles.button, styles.minimizeButton],
+      activeOpacity: 0.8,
+      accessibilityLabel: "Minimize modal",
+      accessibilityRole: "button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
+        size: ICON_SIZE,
+        color: "#7A5A00",
+        strokeWidth: 1.5
+      })
+    }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onToggleMode,
+      style: [styles.button, styles.expandButton],
+      activeOpacity: 0.8,
+      accessibilityLabel: toggleModeLabel,
+      accessibilityRole: "button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
+        size: ICON_SIZE,
+        color: "#004A1A",
+        strokeWidth: 1.5
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onClose,
+      style: [styles.button, styles.closeButton],
+      activeOpacity: 0.8,
+      accessibilityLabel: "Close modal",
+      accessibilityRole: "button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+        size: ICON_SIZE,
+        color: "#4A0000",
+        strokeWidth: 1.5
+      })
+    })]
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = _reactNative.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/commonjs/ui/components/index.js

@@ -0,0 +1,323 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActionCopyButton", {
+  enumerable: true,
+  get: function () {
+    return _CopyButton.ActionCopyButton;
+  }
+});
+Object.defineProperty(exports, "AddFilterButton", {
+  enumerable: true,
+  get: function () {
+    return _FilterComponents.AddFilterButton;
+  }
+});
+Object.defineProperty(exports, "AddFilterInput", {
+  enumerable: true,
+  get: function () {
+    return _FilterComponents.AddFilterInput;
+  }
+});
+Object.defineProperty(exports, "BackButton", {
+  enumerable: true,
+  get: function () {
+    return _BackButton.BackButton;
+  }
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.Badge;
+  }
+});
+Object.defineProperty(exports, "ClipboardHintBanner", {
+  enumerable: true,
+  get: function () {
+    return _ClipboardHintBanner.ClipboardHintBanner;
+  }
+});
+Object.defineProperty(exports, "CollapsibleSection", {
+  enumerable: true,
+  get: function () {
+    return _CollapsibleSection.CollapsibleSection;
+  }
+});
+Object.defineProperty(exports, "CompactFilterChips", {
+  enumerable: true,
+  get: function () {
+    return _CompactFilterChips.CompactFilterChips;
+  }
+});
+Object.defineProperty(exports, "CompactRow", {
+  enumerable: true,
+  get: function () {
+    return _CompactRow.CompactRow;
+  }
+});
+Object.defineProperty(exports, "CompareBar", {
+  enumerable: true,
+  get: function () {
+    return _index.CompareBar;
+  }
+});
+Object.defineProperty(exports, "CopyButton", {
+  enumerable: true,
+  get: function () {
+    return _CopyButton.CopyButton;
+  }
+});
+Object.defineProperty(exports, "CountBadge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.CountBadge;
+  }
+});
+Object.defineProperty(exports, "DataInspector", {
+  enumerable: true,
+  get: function () {
+    return _DataInspector.DataInspector;
+  }
+});
+Object.defineProperty(exports, "DetailView", {
+  enumerable: true,
+  get: function () {
+    return _DetailView.DetailView;
+  }
+});
+Object.defineProperty(exports, "DiffModeTabs", {
+  enumerable: true,
+  get: function () {
+    return _index.DiffModeTabs;
+  }
+});
+Object.defineProperty(exports, "DraggableHeader", {
+  enumerable: true,
+  get: function () {
+    return _DraggableHeader.DraggableHeader;
+  }
+});
+Object.defineProperty(exports, "DynamicFilterView", {
+  enumerable: true,
+  get: function () {
+    return _DynamicFilterView.DynamicFilterView;
+  }
+});
+Object.defineProperty(exports, "EmptyState", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.EmptyState;
+  }
+});
+Object.defineProperty(exports, "EventHistoryViewer", {
+  enumerable: true,
+  get: function () {
+    return _index.EventHistoryViewer;
+  }
+});
+Object.defineProperty(exports, "EventListItem", {
+  enumerable: true,
+  get: function () {
+    return _EventListItem.EventListItem;
+  }
+});
+Object.defineProperty(exports, "EventPickerModal", {
+  enumerable: true,
+  get: function () {
+    return _index.EventPickerModal;
+  }
+});
+Object.defineProperty(exports, "EventStepperFooter", {
+  enumerable: true,
+  get: function () {
+    return _EventStepperFooter.EventStepperFooter;
+  }
+});
+Object.defineProperty(exports, "ExpandablePopover", {
+  enumerable: true,
+  get: function () {
+    return _ExpandablePopover.ExpandablePopover;
+  }
+});
+Object.defineProperty(exports, "FilterBadge", {
+  enumerable: true,
+  get: function () {
+    return _FilterComponents.FilterBadge;
+  }
+});
+Object.defineProperty(exports, "FilterList", {
+  enumerable: true,
+  get: function () {
+    return _FilterComponents.FilterList;
+  }
+});
+Object.defineProperty(exports, "FilterSection", {
+  enumerable: true,
+  get: function () {
+    return _FilterComponents.FilterSection;
+  }
+});
+Object.defineProperty(exports, "HeaderSearchButton", {
+  enumerable: true,
+  get: function () {
+    return _HeaderSearchButton.HeaderSearchButton;
+  }
+});
+Object.defineProperty(exports, "InlineCopyButton", {
+  enumerable: true,
+  get: function () {
+    return _CopyButton.InlineCopyButton;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItem;
+  }
+});
+Object.defineProperty(exports, "MethodBadge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.MethodBadge;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _ModalHeader.ModalHeader;
+  }
+});
+Object.defineProperty(exports, "ModalHintBanner", {
+  enumerable: true,
+  get: function () {
+    return _ModalHintBanner.ModalHintBanner;
+  }
+});
+Object.defineProperty(exports, "NoDataEmptyState", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.NoDataEmptyState;
+  }
+});
+Object.defineProperty(exports, "NoResultsEmptyState", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.NoResultsEmptyState;
+  }
+});
+Object.defineProperty(exports, "NoSearchResultsEmptyState", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.NoSearchResultsEmptyState;
+  }
+});
+Object.defineProperty(exports, "SearchBar", {
+  enumerable: true,
+  get: function () {
+    return _SearchBar.SearchBar;
+  }
+});
+Object.defineProperty(exports, "SectionHeader", {
+  enumerable: true,
+  get: function () {
+    return _SectionHeader.SectionHeader;
+  }
+});
+Object.defineProperty(exports, "StatsCard", {
+  enumerable: true,
+  get: function () {
+    return _StatsCard.StatsCard;
+  }
+});
+Object.defineProperty(exports, "StatusBadge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.StatusBadge;
+  }
+});
+Object.defineProperty(exports, "StatusIndicator", {
+  enumerable: true,
+  get: function () {
+    return _StatusIndicator.StatusIndicator;
+  }
+});
+Object.defineProperty(exports, "StorageTypeBadge", {
+  enumerable: true,
+  get: function () {
+    return _StorageTypeBadge.StorageTypeBadge;
+  }
+});
+Object.defineProperty(exports, "TabSelector", {
+  enumerable: true,
+  get: function () {
+    return _TabSelector.TabSelector;
+  }
+});
+Object.defineProperty(exports, "TimeDisplay", {
+  enumerable: true,
+  get: function () {
+    return _TimeDisplay.TimeDisplay;
+  }
+});
+Object.defineProperty(exports, "ToolbarCopyButton", {
+  enumerable: true,
+  get: function () {
+    return _CopyButton.ToolbarCopyButton;
+  }
+});
+Object.defineProperty(exports, "TypeBadge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.TypeBadge;
+  }
+});
+Object.defineProperty(exports, "ValueTypeBadge", {
+  enumerable: true,
+  get: function () {
+    return _ValueTypeBadge.ValueTypeBadge;
+  }
+});
+Object.defineProperty(exports, "ViewToggleCards", {
+  enumerable: true,
+  get: function () {
+    return _index.ViewToggleCards;
+  }
+});
+Object.defineProperty(exports, "WindowControls", {
+  enumerable: true,
+  get: function () {
+    return _WindowControls.WindowControls;
+  }
+});
+var _BackButton = require("./BackButton.js");
+var _ValueTypeBadge = require("./ValueTypeBadge.js");
+var _StorageTypeBadge = require("./StorageTypeBadge.js");
+var _CopyButton = require("./CopyButton.js");
+var _ModalHeader = require("./ModalHeader.js");
+var _ModalHintBanner = require("./ModalHintBanner.js");
+var _ClipboardHintBanner = require("./ClipboardHintBanner.js");
+var _SectionHeader = require("./SectionHeader.js");
+var _ListItem = require("./ListItem.js");
+var _FilterComponents = require("./FilterComponents.js");
+var _CompactFilterChips = require("./CompactFilterChips.js");
+var _Badge = require("./Badge.js");
+var _TabSelector = require("./TabSelector.js");
+var _EventListItem = require("./EventListItem.js");
+var _StatsCard = require("./StatsCard.js");
+var _CompactRow = require("./CompactRow.js");
+var _HeaderSearchButton = require("./HeaderSearchButton.js");
+var _EmptyState = require("./EmptyState.js");
+var _StatusIndicator = require("./StatusIndicator.js");
+var _TimeDisplay = require("./TimeDisplay.js");
+var _DetailView = require("./DetailView.js");
+var _DraggableHeader = require("./DraggableHeader.js");
+var _CollapsibleSection = require("./CollapsibleSection.js");
+var _DataInspector = require("./DataInspector.js");
+var _SearchBar = require("./SearchBar.js");
+var _DynamicFilterView = require("./DynamicFilterView.js");
+var _WindowControls = require("./WindowControls.js");
+var _EventStepperFooter = require("./EventStepperFooter.js");
+var _ExpandablePopover = require("./ExpandablePopover.js");
+var _index = require("./EventHistoryViewer/index.js");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BubbleSettingsModal = BubbleSettingsModal;
+var _react = require("react");
+var _ModalHeader = require("../components/ModalHeader.js");
+var _JsModal = require("../../JsModal.js");
+var _index = require("../../settings/index.js");
+var _devToolsStorageKeys = require("../../storage/devToolsStorageKeys.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function BubbleSettingsModal({
+  visible,
+  onClose,
+  onBack,
+  enableSharedModalDimensions = false,
+  onSettingsChange
+}) {
+  const handleModeChange = (0, _react.useCallback)(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  if (!visible) return null;
+  const persistenceKey = enableSharedModalDimensions ? _devToolsStorageKeys.devToolsStorageKeys.modal.root() : _devToolsStorageKeys.devToolsStorageKeys.bubble.settings();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_JsModal.JsModal, {
+    visible: visible,
+    onClose: onClose,
+    persistenceKey: persistenceKey,
+    header: {
+      showToggleButton: true,
+      customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalHeader.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeader.ModalHeader.Navigation, {
+          onBack: onBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeader.ModalHeader.Content, {
+          title: "Bubble Settings",
+          subtitle: "Configure visibility",
+          centered: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeader.ModalHeader.Actions, {})]
+      })
+    },
+    onModeChange: handleModeChange,
+    enablePersistence: true,
+    initialMode: "bottomSheet",
+    enableGlitchEffects: true,
+    styles: {},
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BubbleSettingsDetail, {
+      onSettingsChange: onSettingsChange
+    })
+  });
+}

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

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