@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/ui/gameUI/components/GameUIStatusHeader.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GameUIStatusHeader = GameUIStatusHeader;
+var _reactNative = require("react-native");
+var _gameUIColors = require("../constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Reusable status header component showing system health
+ * Displays icon, status label, subtitle, and badge
+ * Used at the top of ENV, Storage, and other diagnostic screens
+ */
+function GameUIStatusHeader({
+  alertConfig,
+  badgeText,
+  animatedStyle,
+  style,
+  indicatorCount = 3
+}) {
+  const IconComponent = alertConfig.icon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    style: [styles.container, {
+      borderColor: alertConfig.color + "40"
+    }, style, animatedStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.glow, {
+        backgroundColor: alertConfig.color + "10"
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.content,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconWrapper, {
+          backgroundColor: alertConfig.color + "15"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          size: 20,
+          color: alertConfig.color
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.label, {
+            color: alertConfig.color
+          }],
+          children: alertConfig.label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.subtitle,
+          children: alertConfig.subtitle
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.badge, {
+          backgroundColor: alertConfig.color + "20"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.badgeText, {
+            color: alertConfig.color
+          }],
+          children: badgeText
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.indicators,
+      children: [...Array(indicatorCount)].map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.indicatorDot, {
+          backgroundColor: alertConfig.color,
+          opacity: alertConfig.pulse ? i === 0 ? 1 : 0.5 - i * 0.2 : 0.3 - i * 0.1
+        }]
+      }, i))
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: _gameUIColors.gameUIColors.panel,
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16,
+    marginBottom: 16,
+    position: "relative",
+    overflow: "hidden"
+  },
+  glow: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    opacity: 0.5
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  iconWrapper: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  textContainer: {
+    flex: 1,
+    gap: 2
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 1.5,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    },
+    textShadowRadius: 8
+  },
+  subtitle: {
+    fontSize: 10,
+    color: _gameUIColors.gameUIColors.secondary,
+    fontFamily: "monospace"
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  badgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 1
+  },
+  indicators: {
+    position: "absolute",
+    top: 8,
+    right: 8,
+    flexDirection: "row",
+    gap: 3
+  },
+  indicatorDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2
+  }
+});

package/lib/commonjs/ui/gameUI/constants/gameUIColors.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gameUIColors = exports.dialColors = exports.buoyColors = void 0;
+var _macOSDesignSystemColors = require("./macOSDesignSystemColors.js");
+/**
+ * Game UI Color Palette - Simple Theme Swapping
+ *
+ * TO CHANGE THEME:
+ * 1. Comment out the current theme line
+ * 2. Uncomment the theme you want
+ * 3. Save and refresh
+ */
+
+// ============================================
+// THEME DEFINITIONS
+// ============================================
+
+const defaultTheme = {
+  // Base colors
+  border: "#00B8E666",
+  blackTint1: "rgba(8, 12, 21, 0.95)",
+  blackTint2: "rgba(16, 22, 35, 0.9)",
+  blackTint3: "rgba(24, 32, 48, 0.85)",
+  // Status Colors - Mixed colors for different semantic meanings
+  success: "#4AFF9F",
+  // Green for success
+  warning: "#FFEB3B",
+  // Yellow for warning
+  error: "#FF5252",
+  // Red for error
+  info: "#00B8E6",
+  // Cyan for info
+  critical: "#FF00FF",
+  // Magenta for critical
+  optional: "#9D4EDD",
+  // Purple for optional
+
+  // Tool Colors - Different colors for different tools
+  env: "#4AFF9F",
+  // Green for environment
+  storage: "#BA68C8",
+  // Purple/Magenta for storage (was yellow)
+  query: "#00B8E6",
+  // Cyan for query
+  debug: "#FF5252",
+  // Red for debug
+  network: "#4AFF9F",
+  // Green for network to match connectivity theme
+
+  // Data Types - Varied colors for syntax highlighting
+  dataTypes: {
+    object: "#00B8E6",
+    // Cyan
+    array: "#FFEB3B",
+    // Yellow
+    string: "#4AFF9F",
+    // Green
+    number: "#FF9F1C",
+    // Orange
+    boolean: "#FF00FF",
+    // Magenta
+    function: "#9D4EDD",
+    // Purple
+    undefined: "#7A8599",
+    // Gray
+    null: "#FF5252" // Red
+  },
+  // Text
+  text: "#FFFFFF",
+  secondary: "#B8BFC9",
+  tertiary: "#9CA3AF",
+  muted: "#7A8599",
+  // Neon - Multi-color glow effects
+  neonGlow: {
+    primary: "#00D4FF",
+    secondary: "#FF00FF",
+    tertiary: "#4AFF9F"
+  },
+  // Diff Viewer Colors - Exact from devToolsDefaultTheme
+  diff: {
+    // Line backgrounds
+    addedBackground: "rgba(74, 255, 159, 0.1)",
+    // Green-cyan for additions
+    removedBackground: "rgba(255, 82, 82, 0.1)",
+    // Red for removals
+    modifiedBackground: "rgba(0, 184, 230, 0.1)",
+    // Cyan for modifications
+    unchangedBackground: "transparent",
+    contextBackground: "rgba(255, 255, 255, 0.02)",
+    // Text colors
+    addedText: "#4AFF9F",
+    // Bright green-cyan
+    removedText: "#FF5252",
+    // Bright red
+    modifiedText: "#00B8E6",
+    // Bright cyan
+    unchangedText: "#B8BFC9",
+    // Muted text
+
+    // Word-level highlights (darker than line backgrounds)
+    addedWordHighlight: "rgba(74, 255, 159, 0.3)",
+    removedWordHighlight: "rgba(255, 82, 82, 0.3)",
+    // Line numbers
+    lineNumberBackground: "#0A0E1A",
+    lineNumberText: "#7A8599",
+    lineNumberBorder: "#1F2937",
+    // Markers (+/-)
+    markerAddedBackground: "rgba(74, 255, 159, 0.2)",
+    markerRemovedBackground: "rgba(255, 82, 82, 0.2)",
+    markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
+    markerText: "#7A8599"
+  }
+};
+
+// macOS theme - Apple HIG based design system
+const macOSTheme = _macOSDesignSystemColors.macOSGameUIColors;
+
+// ============================================
+// THEME SELECTION - Just change this one line!
+// ============================================
+
+// const activeTheme = defaultTheme; // DEFAULT - Mixed colors (original)
+const activeTheme = macOSTheme; // macOS - Apple HIG design system
+
+// ============================================
+// GAME UI COLORS (uses selected theme)
+// ============================================
+
+const gameUIColors = exports.gameUIColors = {
+  ...activeTheme,
+  // Defaults (dark-ish) which can be overridden by theme spreads
+  background: "rgba(8, 12, 21, 0.98)",
+  panel: "rgba(16, 22, 35, 0.98)",
+  backdrop: "rgba(0, 0, 0, 0.85)",
+  buttonBackground: "rgba(12, 16, 26, 0.9)",
+  pureBlack: "#000000",
+  // Default text colors for dark background
+  primary: "#FFFFFF",
+  primaryLight: "#F1F5F9"
+
+  // Theme-specific colors (later spread overrides defaults when present)
+};
+// ============================================
+// BUOY BRAND COLORS
+// ============================================
+/**
+ * Buoy brand colors - EXACT values from web docs site dark theme.
+ * Use these for consistent branding across all Buoy dev tools.
+ */
+const buoyColors = exports.buoyColors = {
+  // Backgrounds (dark to light)
+  base: "#121212",
+  card: "#1A1A1A",
+  hover: "#242424",
+  input: "#2A2A2A",
+  // Borders
+  border: "#333333",
+  borderStrong: "#444444",
+  // Text (light to dark)
+  text: "#E0E0E0",
+  textSecondary: "#A0A0A0",
+  textMuted: "#888888",
+  // Accent colors
+  primary: "#20C997",
+  // Buoy teal
+  success: "#20C997",
+  // Same as primary
+  warning: "#FFA94D",
+  // Orange
+  error: "#EF4444",
+  // Red
+  info: "#00B8E6" // Cyan for info/devices
+};
+// Fixed dial colors for cyberpunk theme
+const dialColors = exports.dialColors = {
+  dialBackground: gameUIColors.pureBlack,
+  dialGradient1: `${gameUIColors.info}10`,
+  dialGradient2: `${gameUIColors.info}08`,
+  dialGradient3: `${gameUIColors.info}15`,
+  dialBorder: `${gameUIColors.info}40`,
+  dialShadow: gameUIColors.info,
+  dialGridLine: `${gameUIColors.info}26`
+};

package/lib/commonjs/ui/gameUI/constants/macOSDesignSystemColors.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.macOSGameUIColors = exports.macOSColors = void 0;
+/**
+ * macOS Desktop App Design System Colors
+ * Based on Apple's Human Interface Guidelines with a dark-mode-first approach
+ * Single source of truth for all design decisions
+ */
+
+const macOSColors = exports.macOSColors = {
+  // Background Colors
+  background: {
+    base: "#0A0A0C",
+    // Main app background, darkest layer
+    card: "#1A1A1C",
+    // Card backgrounds, elevated surfaces
+    hover: "#1D1D1F",
+    // Hover states for interactive elements
+    input: "#26262A" // Input field backgrounds, recessed areas
+  },
+  // Border Colors
+  border: {
+    default: "#2D2D2F",
+    // Main borders, dividers
+    toggle: "#3D3D3F",
+    // Toggle switch backgrounds
+    input: "#3D3D42",
+    // Input field borders
+    hover: "#4D4D4F" // Hover state borders
+  },
+  // Text Colors
+  text: {
+    primary: "#F5F5F7",
+    // Main text, headers
+    secondary: "#A1A1A6",
+    // Subtitles, secondary information
+    muted: "#8E8E93",
+    // Placeholder text, disabled states
+    disabled: "#9E9EA0",
+    // Inactive elements
+    icon: "#6D6D6F" // Icon colors, subtle graphics
+  },
+  // Semantic Colors
+  semantic: {
+    // Success
+    success: "#34C759",
+    // green-500 equivalent
+    successLight: "#52D976",
+    // green-400 equivalent
+    successLighter: "#86E29F",
+    // green-300 equivalent
+    successBackground: "rgba(52, 199, 89, 0.15)",
+    // green-900/80 equivalent
+
+    // Error
+    error: "#FF453A",
+    // red-500 equivalent
+    errorLight: "#FF6961",
+    // red-400 equivalent
+    errorLighter: "#FF887F",
+    // red-300 equivalent
+    errorBackground: "rgba(255, 69, 58, 0.15)",
+    // red-900/80 equivalent
+
+    // Warning - Using the preferred cyberpunk yellow
+    warning: "#FFEB3B",
+    // Bright cyberpunk yellow
+    warningLight: "#FFF066",
+    // Lighter variant
+    warningBackground: "rgba(255, 235, 59, 0.15)",
+    // yellow background
+
+    // Info - Using the preferred cyberpunk cyan
+    info: "#00B8E6",
+    // Bright cyberpunk cyan
+    infoLight: "#40CCFF",
+    // Lighter variant
+    infoLighter: "#70D8FF",
+    // Even lighter variant
+    infoBackground: "rgba(0, 184, 230, 0.1)",
+    // cyan background
+
+    // Debug
+    debug: "#BF5AF2" // purple-400 equivalent
+  },
+  // Platform-Specific Colors
+  platform: {
+    ios: "#E5E5EA",
+    // gray-100 equivalent
+    android: "#86E29F",
+    // green-300 equivalent
+    web: "#70B8FF",
+    // blue-300 equivalent
+    webAlt: "#5AC8FA",
+    // cyan-400 equivalent
+    tv: "#B381F0" // purple-300 equivalent
+  },
+  // Shadow System
+  shadows: {
+    sm: "0 0.5rem 1.5rem rgba(0,0,0,0.15)",
+    md: "0 0.75rem 2.5rem rgba(0,0,0,0.25)",
+    lg: "0 1rem 3rem rgba(0,0,0,0.3)",
+    xl: "0 1.5rem 3rem rgba(0,0,0,0.35)",
+    // Glow Effects
+    successGlow: "0 0 8px rgba(52, 199, 89, 0.1)",
+    errorGlow: "0 0 8px rgba(255, 69, 58, 0.1)",
+    warningGlow: "0 0 8px rgba(255, 235, 59, 0.2)",
+    infoGlow: "0 0 8px rgba(0, 184, 230, 0.2)",
+    infoGlowStrong: "0 0 10px rgba(0, 184, 230, 0.3)"
+  },
+  // Data Types (for syntax highlighting)
+  dataTypes: {
+    object: "#00B8E6",
+    // Cyan (matching preferred info color)
+    array: "#FFEB3B",
+    // Yellow (matching preferred warning color)
+    string: "#34C759",
+    // Green
+    number: "#FF9F0A",
+    // Orange
+    boolean: "#BF5AF2",
+    // Purple
+    function: "#5E5CE6",
+    // Indigo
+    undefined: "#8E8E93",
+    // Gray
+    null: "#FF453A" // Red
+  },
+  // Diff Viewer Colors
+  diff: {
+    // Line backgrounds
+    addedBackground: "rgba(52, 199, 89, 0.1)",
+    removedBackground: "rgba(255, 69, 58, 0.1)",
+    modifiedBackground: "rgba(0, 184, 230, 0.1)",
+    // Using cyan
+    unchangedBackground: "transparent",
+    contextBackground: "rgba(245, 245, 247, 0.02)",
+    // Text colors
+    addedText: "#34C759",
+    removedText: "#FF453A",
+    modifiedText: "#00B8E6",
+    // Using cyan
+    unchangedText: "#A1A1A6",
+    // Word-level highlights
+    addedWordHighlight: "rgba(52, 199, 89, 0.3)",
+    removedWordHighlight: "rgba(255, 69, 58, 0.3)",
+    // Line numbers
+    lineNumberBackground: "#0A0A0C",
+    lineNumberText: "#8E8E93",
+    lineNumberBorder: "#2D2D2F",
+    // Markers
+    markerAddedBackground: "rgba(52, 199, 89, 0.2)",
+    markerRemovedBackground: "rgba(255, 69, 58, 0.2)",
+    markerModifiedBackground: "rgba(0, 184, 230, 0.2)",
+    // Using cyan
+    markerText: "#8E8E93"
+  }
+};
+
+// Create a compatible gameUIColors object for gradual migration
+const macOSGameUIColors = exports.macOSGameUIColors = {
+  // Base backgrounds
+  background: macOSColors.background.base,
+  panel: macOSColors.background.card,
+  backdrop: "rgba(0, 0, 0, 0.85)",
+  buttonBackground: macOSColors.background.hover,
+  pureBlack: "#000000",
+  // Borders
+  border: macOSColors.border.default,
+  blackTint1: macOSColors.background.base,
+  blackTint2: macOSColors.background.card,
+  blackTint3: macOSColors.background.hover,
+  // Status Colors
+  success: macOSColors.semantic.success,
+  warning: macOSColors.semantic.warning,
+  error: macOSColors.semantic.error,
+  info: macOSColors.semantic.info,
+  critical: macOSColors.semantic.error,
+  optional: macOSColors.semantic.debug,
+  // Tool Colors
+  env: macOSColors.semantic.success,
+  storage: macOSColors.semantic.debug,
+  query: macOSColors.semantic.info,
+  debug: macOSColors.semantic.error,
+  network: macOSColors.semantic.success,
+  // Data Types
+  dataTypes: macOSColors.dataTypes,
+  // Text
+  text: macOSColors.text.primary,
+  primary: macOSColors.text.primary,
+  primaryLight: macOSColors.text.primary,
+  secondary: macOSColors.text.secondary,
+  tertiary: macOSColors.text.secondary,
+  muted: macOSColors.text.muted,
+  // Diff
+  diff: macOSColors.diff,
+  // Additional properties for compatibility
+  neonGlow: {
+    primary: macOSColors.semantic.info,
+    secondary: macOSColors.semantic.debug,
+    tertiary: macOSColors.semantic.success
+  }
+};

package/lib/commonjs/ui/gameUI/hooks/useGameUIAlertState.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GAME_UI_ALERT_STATES = void 0;
+exports.useGameUIAlertState = useGameUIAlertState;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../../icons/index.js");
+var _gameUIColors = require("../constants/gameUIColors.js");
+// Standard alert states for ENV and Storage
+const GAME_UI_ALERT_STATES = exports.GAME_UI_ALERT_STATES = {
+  OPTIMAL: {
+    icon: _index.CheckCircle,
+    color: _gameUIColors.gameUIColors.success,
+    label: "CONFIG OK",
+    subtitle: "All requirements met",
+    pulse: false
+  },
+  WARNING: {
+    icon: _index.AlertTriangle,
+    color: _gameUIColors.gameUIColors.warning,
+    label: "CONFIG WARNING",
+    subtitle: "Check values and types",
+    pulse: false
+  },
+  ERROR: {
+    icon: _index.AlertCircle,
+    color: _gameUIColors.gameUIColors.error,
+    label: "CONFIG ERROR",
+    subtitle: "Missing required data",
+    pulse: false
+  },
+  CRITICAL: {
+    icon: _index.AlertOctagon,
+    color: _gameUIColors.gameUIColors.critical,
+    label: "CONFIG FAILURE",
+    subtitle: "Multiple critical issues",
+    pulse: false
+  },
+  LOADING: {
+    icon: _index.Activity,
+    color: _gameUIColors.gameUIColors.info,
+    label: "LOADING",
+    subtitle: "Reading configuration...",
+    pulse: true
+  },
+  EMPTY: {
+    icon: _index.HelpCircle,
+    color: _gameUIColors.gameUIColors.muted,
+    label: "NO DATA",
+    subtitle: "No configuration found",
+    pulse: false
+  }
+};
+/**
+ * Hook to determine alert state from stats and provide animations
+ * Reusable across ENV, Storage, and other validation screens
+ */
+function useGameUIAlertState(stats, customStates) {
+  // Merge custom states with defaults
+  const alertStates = (0, _react.useMemo)(() => ({
+    ...GAME_UI_ALERT_STATES,
+    ...customStates
+  }), [customStates]);
+
+  // Determine alert state based on stats
+  const alertState = (0, _react.useMemo)(() => {
+    if (stats.totalCount === 0) return "EMPTY";
+    if (stats.missingCount > 2 || stats.wrongTypeCount > 2) return "CRITICAL";
+    if (stats.missingCount > 0) return "ERROR";
+    if (stats.wrongValueCount > 0 || stats.wrongTypeCount > 0) return "WARNING";
+    return "OPTIMAL";
+  }, [stats]);
+  const alertConfig = alertStates[alertState];
+
+  // Animation values
+  const alertOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const alertScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+
+  // Animate on state change
+  (0, _react.useEffect)(() => {
+    alertOpacity.setValue(0);
+    alertScale.setValue(0.95);
+    _reactNative.Animated.parallel([_reactNative.Animated.timing(alertOpacity, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(alertScale, {
+      toValue: 1,
+      duration: 300,
+      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+      useNativeDriver: true
+    })]).start();
+  }, [alertState, alertOpacity, alertScale]);
+  const alertAnimatedStyle = {
+    transform: [{
+      scale: alertScale
+    }],
+    opacity: alertOpacity
+  };
+  return {
+    alertState,
+    alertConfig,
+    alertAnimatedStyle,
+    alertOpacity,
+    alertScale
+  };
+}