@buoy-gg/shared-ui 7.0.7 → 7.0.8

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

@@ -1,68 +0,0 @@
-"use strict";
-
-import { useState } from "react";
-import { StyleSheet, View, Animated } from "react-native";
-import { ExpandableSectionHeader } from "./ExpandableSectionHeader.js";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ExpandableSection({
-  icon,
-  iconColor,
-  iconBackgroundColor,
-  title,
-  subtitle,
-  children,
-  defaultExpanded = false,
-  onPress
-}) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  const handlePress = () => {
-    if (onPress) {
-      onPress();
-    } else {
-      setIsExpanded(!isExpanded);
-    }
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.content,
-      children: [/*#__PURE__*/_jsx(ExpandableSectionHeader, {
-        icon: icon,
-        iconColor: iconColor,
-        iconBackgroundColor: iconBackgroundColor,
-        title: title,
-        subtitle: subtitle,
-        isExpanded: isExpanded,
-        onPress: handlePress
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.divider
-      }), isExpanded && /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          opacity: 1
-        },
-        children: children
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)",
-    overflow: "hidden",
-    marginHorizontal: 8,
-    marginBottom: 16
-  },
-  content: {
-    padding: 24
-  },
-  divider: {
-    height: 1,
-    width: "100%",
-    backgroundColor: "rgba(128, 128, 128, 0.12)",
-    marginBottom: 24
-  }
-});

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

@@ -1,83 +0,0 @@
-"use strict";
-
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { ChevronDown, ChevronRight } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ExpandableSectionHeader({
-  icon: Icon,
-  iconColor,
-  iconBackgroundColor,
-  title,
-  subtitle,
-  isExpanded,
-  onPress
-}) {
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": "ignore expand section button",
-    accessibilityRole: "button",
-    onPress: onPress,
-    style: styles.button,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.container,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.iconContainer, {
-          backgroundColor: iconBackgroundColor.replace(")", ", 0.7)").replace("rgb(", "rgba(")
-        }],
-        children: /*#__PURE__*/_jsx(Icon, {
-          size: 20,
-          color: iconColor
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.title,
-          children: title
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.subtitle,
-          numberOfLines: 2,
-          children: subtitle
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.chevronContainer,
-        children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-          size: 18,
-          color: "#4B5563"
-        }) : /*#__PURE__*/_jsx(ChevronRight, {
-          size: 18,
-          color: "#4B5563"
-        })
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  button: {
-    marginBottom: 16
-  },
-  container: {
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  iconContainer: {
-    padding: 12,
-    borderRadius: 12
-  },
-  textContainer: {
-    flex: 1,
-    marginHorizontal: 16
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "500",
-    color: "white",
-    marginBottom: 4
-  },
-  subtitle: {
-    fontSize: 16,
-    color: buoyColors.textSecondary
-  },
-  chevronContainer: {
-    paddingTop: 6
-  }
-});

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

@@ -1,179 +0,0 @@
-"use strict";
-
-import { useState } from "react";
-import { Dimensions, Modal, ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
-import { absoluteFill } from "../../utils/absoluteFill.js";
-import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
-import { X } from "../../icons/index.js";
-import { ExpandableSection } from "./ExpandableSection.js";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  height: screenHeight
-} = Dimensions.get("window");
-export function ExpandableSectionWithModal({
-  icon,
-  iconColor,
-  iconBackgroundColor,
-  title,
-  subtitle,
-  children,
-  modalBackgroundColor = "#0F0F0F",
-  showModalHeader = true,
-  fullScreen = false,
-  onModalOpen,
-  onModalClose
-}) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const insets = useSafeAreaInsets({
-    minBottom: 16
-  });
-  const openModal = () => {
-    setIsModalOpen(true);
-    onModalOpen?.();
-  };
-  const closeModal = () => {
-    setIsModalOpen(false);
-    onModalClose?.();
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ExpandableSection, {
-      icon: icon,
-      iconColor: iconColor,
-      iconBackgroundColor: iconBackgroundColor,
-      title: title,
-      subtitle: subtitle,
-      onPress: openModal,
-      children: /*#__PURE__*/_jsx(_Fragment, {})
-    }), /*#__PURE__*/_jsx(Modal, {
-      accessibilityLabel: "Expandable section modal",
-      accessibilityHint: "View expandable section modal",
-      "sentry-label": "ignore expandable section modal",
-      visible: isModalOpen,
-      transparent: true,
-      animationType: "slide",
-      onRequestClose: closeModal,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.container,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.backdrop,
-          children: /*#__PURE__*/_jsx(TouchableOpacity, {
-            accessibilityLabel: "Modal backdrop close",
-            accessibilityHint: "View modal backdrop close",
-            "sentry-label": "ignore modal backdrop close",
-            accessibilityRole: "button",
-            style: styles.backdropTouchable,
-            onPress: closeModal,
-            activeOpacity: 1
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: fullScreen ? styles.fullScreenModalContainer : styles.modalContainer,
-          children: /*#__PURE__*/_jsxs(View, {
-            style: [fullScreen ? styles.fullScreenModal : styles.modal, {
-              backgroundColor: modalBackgroundColor,
-              paddingTop: fullScreen ? insets.top : showModalHeader ? insets.top : 0
-            }],
-            children: [showModalHeader && /*#__PURE__*/_jsx(View, {
-              style: styles.headerContainer,
-              children: /*#__PURE__*/_jsx(TouchableOpacity, {
-                accessibilityLabel: "Modal close button",
-                accessibilityHint: "View modal close button",
-                "sentry-label": "ignore modal close button",
-                accessibilityRole: "button",
-                onPress: closeModal,
-                style: styles.closeButton,
-                children: /*#__PURE__*/_jsx(X, {
-                  size: 20,
-                  color: "#9CA3AF"
-                })
-              })
-            }), showModalHeader ? /*#__PURE__*/_jsxs(ScrollView, {
-              accessibilityLabel: "Modal content scroll",
-              accessibilityHint: "View modal content scroll",
-              "sentry-label": "ignore modal content scroll",
-              style: styles.scrollView,
-              contentContainerStyle: styles.contentContainer,
-              showsVerticalScrollIndicator: false,
-              nestedScrollEnabled: true,
-              scrollEventThrottle: 16,
-              children: [/*#__PURE__*/_jsx(View, {
-                style: styles.content,
-                children: typeof children === "function" ? children(closeModal) : children
-              }), /*#__PURE__*/_jsx(View, {
-                style: {
-                  paddingBottom: insets.bottom + 20
-                }
-              })]
-            }) :
-            /*#__PURE__*/
-            /* Direct content without ScrollView wrapper when no header - allows internal gesture handling */
-            _jsx(View, {
-              style: styles.directContent,
-              pointerEvents: "box-none",
-              children: typeof children === "function" ? children(closeModal) : children
-            })]
-          })
-        })]
-      })
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  backdrop: {
-    ...absoluteFill,
-    backgroundColor: "rgba(0, 0, 0, 0.8)"
-  },
-  backdropTouchable: {
-    flex: 1
-  },
-  modalContainer: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    maxHeight: screenHeight * 0.9
-  },
-  fullScreenModalContainer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: screenHeight
-  },
-  modal: {
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    minHeight: 200,
-    flex: 1
-  },
-  fullScreenModal: {
-    flex: 1,
-    minHeight: screenHeight
-  },
-  headerContainer: {
-    alignItems: "flex-end",
-    paddingHorizontal: 20,
-    paddingTop: 16,
-    paddingBottom: 8
-  },
-  closeButton: {
-    padding: 8,
-    borderRadius: 8,
-    backgroundColor: "rgba(156, 163, 175, 0.1)"
-  },
-  scrollView: {
-    flex: 1
-  },
-  contentContainer: {
-    flexGrow: 1
-  },
-  content: {
-    flex: 1
-  },
-  directContent: {
-    flex: 1
-  }
-});

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

@@ -1,172 +0,0 @@
-"use strict";
-
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
-import { Plus } from "../../icons/index.js";
-import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
-import { useFilterManager } from "../../hooks/useFilterManager.js";
-import { FilterSection, AddFilterInput, AddFilterButton, FilterList } from "./FilterComponents.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function FilterViewPattern({
-  patterns,
-  availableItems,
-  onTogglePattern,
-  onAddPattern,
-  icon: Icon,
-  iconColor = gameUIColors.network,
-  placeholder = "Enter pattern",
-  emptyText = "No patterns configured",
-  suggestionsTitle = "AVAILABLE ITEMS",
-  type
-}) {
-  const filterManager = useFilterManager(patterns);
-  const suggestedItems = availableItems.filter(item => !patterns.has(item));
-  const handleAddPattern = () => {
-    if (filterManager.newFilter.trim()) {
-      onAddPattern(filterManager.newFilter.trim());
-      filterManager.addFilter(filterManager.newFilter);
-    }
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: /*#__PURE__*/_jsxs(FilterSection, {
-      style: styles.filterSectionOverrides,
-      children: [!filterManager.showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
-        onPress: () => filterManager.setShowAddInput(true),
-        color: iconColor
-      }) : /*#__PURE__*/_jsx(AddFilterInput, {
-        value: filterManager.newFilter,
-        onChange: filterManager.setNewFilter,
-        onSubmit: handleAddPattern,
-        onCancel: () => {
-          filterManager.setShowAddInput(false);
-          filterManager.setNewFilter("");
-        },
-        placeholder: placeholder,
-        color: gameUIColors.primaryLight
-      }), suggestedItems.length > 0 ? /*#__PURE__*/_jsxs(View, {
-        style: [styles.suggestedContainer, !filterManager.showAddInput && {
-          marginTop: 12
-        }],
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.suggestedTitle,
-          children: suggestionsTitle
-        }), /*#__PURE__*/_jsx(ScrollView, {
-          style: styles.suggestedScroll,
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: suggestedItems.map(item => /*#__PURE__*/_jsxs(TouchableOpacity, {
-            onPress: () => {
-              if (filterManager.showAddInput) {
-                filterManager.setNewFilter(item);
-              } else {
-                onTogglePattern(item);
-              }
-            },
-            style: styles.suggestedItem,
-            children: [Icon && /*#__PURE__*/_jsx(Icon, {
-              size: 14,
-              color: "#9CA3AF"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.suggestedText,
-              numberOfLines: 1,
-              children: item
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: () => {
-                if (filterManager.showAddInput) {
-                  filterManager.setNewFilter(item);
-                } else {
-                  onTogglePattern(item);
-                }
-              },
-              style: styles.addIconButton,
-              children: /*#__PURE__*/_jsx(Plus, {
-                size: 16,
-                color: "#8B5CF6"
-              })
-            })]
-          }, item))
-        })]
-      }) : availableItems.length === 0 && /*#__PURE__*/_jsxs(View, {
-        style: [styles.suggestedContainer, {
-          marginTop: 12
-        }],
-        children: [/*#__PURE__*/_jsxs(Text, {
-          style: styles.suggestedTitle,
-          children: ["NO ", type.toUpperCase(), " AVAILABLE"]
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.emptyText,
-          children: ["Make some requests to see ", type, " here"]
-        })]
-      }), patterns.size > 0 ? /*#__PURE__*/_jsx(FilterList, {
-        filters: patterns,
-        onRemoveFilter: onTogglePattern,
-        color: iconColor
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: styles.emptyText,
-        children: emptyText
-      })]
-    })
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  filterSectionOverrides: {
-    paddingHorizontal: 0,
-    paddingTop: 0,
-    backgroundColor: "transparent"
-  },
-  suggestedContainer: {
-    backgroundColor: "rgba(128, 128, 128, 0.06)",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
-    maxHeight: 300,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)"
-  },
-  suggestedTitle: {
-    fontSize: 10,
-    color: macOSColors.text.icon,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    marginBottom: 12,
-    textTransform: "uppercase"
-  },
-  suggestedScroll: {
-    maxHeight: 250
-  },
-  suggestedItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: "rgba(128, 128, 128, 0.04)",
-    borderRadius: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    marginBottom: 6,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.1)"
-  },
-  suggestedText: {
-    flex: 1,
-    fontSize: 12,
-    color: buoyColors.text,
-    fontFamily: "monospace",
-    marginLeft: 4
-  },
-  emptyText: {
-    fontSize: 11,
-    color: macOSColors.text.icon,
-    fontStyle: "italic",
-    padding: 12,
-    textAlign: "center"
-  },
-  addIconButton: {
-    padding: 4,
-    borderRadius: 4,
-    backgroundColor: "rgba(139, 92, 246, 0.1)"
-  }
-});

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

@@ -1,96 +0,0 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getTypeConfig = type => {
-  const normalizedType = type.toLowerCase();
-
-  // Use consistent teal-based styling for all types
-  // This matches the Buoy theme where info = primary = teal
-  switch (normalizedType) {
-    case "string":
-      return {
-        backgroundColor: buoyColors.primary + "15",
-        borderColor: buoyColors.primary + "40",
-        textColor: buoyColors.primary,
-        label: "string"
-      };
-    case "number":
-      return {
-        backgroundColor: buoyColors.primary + "15",
-        borderColor: buoyColors.primary + "40",
-        textColor: buoyColors.primary,
-        label: "number"
-      };
-    case "boolean":
-      return {
-        backgroundColor: buoyColors.primary + "15",
-        borderColor: buoyColors.primary + "40",
-        textColor: buoyColors.primary,
-        label: "boolean"
-      };
-    case "object":
-      return {
-        backgroundColor: buoyColors.textMuted + "20",
-        borderColor: buoyColors.textMuted + "40",
-        textColor: buoyColors.textSecondary,
-        label: "object"
-      };
-    case "array":
-      return {
-        backgroundColor: buoyColors.textMuted + "20",
-        borderColor: buoyColors.textMuted + "40",
-        textColor: buoyColors.textSecondary,
-        label: "array"
-      };
-    case "function":
-      return {
-        backgroundColor: buoyColors.textMuted + "20",
-        borderColor: buoyColors.textMuted + "40",
-        textColor: buoyColors.textSecondary,
-        label: "fn"
-      };
-    default:
-      return {
-        backgroundColor: buoyColors.textMuted + "20",
-        borderColor: buoyColors.textMuted + "40",
-        textColor: buoyColors.textMuted,
-        label: normalizedType.slice(0, 6)
-      };
-  }
-};
-export function TypeBadge({
-  type
-}) {
-  if (!type) return null;
-  const config = getTypeConfig(type);
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.badge, {
-      backgroundColor: config.backgroundColor,
-      borderColor: config.borderColor
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.badgeText, {
-        color: config.textColor
-      }],
-      children: config.label
-    })
-  });
-}
-const styles = StyleSheet.create({
-  badge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
-    borderWidth: 1,
-    alignSelf: "flex-start"
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace",
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  }
-});

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

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

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

@@ -1,46 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-"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
-  }
-});