@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,139 @@
+"use strict";
+
+import { StyleSheet, Text, View, Animated } from "react-native";
+import { gameUIColors } from "../constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "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
+ */
+export function GameUIStatusHeader({
+  alertConfig,
+  badgeText,
+  animatedStyle,
+  style,
+  indicatorCount = 3
+}) {
+  const IconComponent = alertConfig.icon;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.container, {
+      borderColor: alertConfig.color + "40"
+    }, style, animatedStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.glow, {
+        backgroundColor: alertConfig.color + "10"
+      }]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.iconWrapper, {
+          backgroundColor: alertConfig.color + "15"
+        }],
+        children: /*#__PURE__*/_jsx(IconComponent, {
+          size: 20,
+          color: alertConfig.color
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.textContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, {
+            color: alertConfig.color
+          }],
+          children: alertConfig.label
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.subtitle,
+          children: alertConfig.subtitle
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.badge, {
+          backgroundColor: alertConfig.color + "20"
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.badgeText, {
+            color: alertConfig.color
+          }],
+          children: badgeText
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.indicators,
+      children: [...Array(indicatorCount)].map((_, i) => /*#__PURE__*/_jsx(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 = StyleSheet.create({
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16,
+    marginBottom: 16,
+    position: "relative",
+    overflow: "hidden"
+  },
+  glow: {
+    ...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.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/module/ui/gameUI/constants/gameUIColors.js

@@ -0,0 +1,183 @@
+"use strict";
+
+/**
+ * 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
+ */
+
+import { macOSGameUIColors } from "./macOSDesignSystemColors.js";
+
+// ============================================
+// 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 = 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)
+// ============================================
+
+export const 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.
+ */
+export const 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
+export const 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/module/ui/gameUI/constants/macOSDesignSystemColors.js

@@ -0,0 +1,202 @@
+"use strict";
+
+/**
+ * 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
+ */
+
+export const 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
+export const 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/module/ui/gameUI/hooks/useGameUIAlertState.js

@@ -0,0 +1,105 @@
+"use strict";
+
+import { useMemo, useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import { CheckCircle, AlertTriangle, AlertCircle, AlertOctagon, Activity, HelpCircle } from "../../../icons/index.js";
+import { gameUIColors } from "../constants/gameUIColors.js";
+// Standard alert states for ENV and Storage
+export const GAME_UI_ALERT_STATES = {
+  OPTIMAL: {
+    icon: CheckCircle,
+    color: gameUIColors.success,
+    label: "CONFIG OK",
+    subtitle: "All requirements met",
+    pulse: false
+  },
+  WARNING: {
+    icon: AlertTriangle,
+    color: gameUIColors.warning,
+    label: "CONFIG WARNING",
+    subtitle: "Check values and types",
+    pulse: false
+  },
+  ERROR: {
+    icon: AlertCircle,
+    color: gameUIColors.error,
+    label: "CONFIG ERROR",
+    subtitle: "Missing required data",
+    pulse: false
+  },
+  CRITICAL: {
+    icon: AlertOctagon,
+    color: gameUIColors.critical,
+    label: "CONFIG FAILURE",
+    subtitle: "Multiple critical issues",
+    pulse: false
+  },
+  LOADING: {
+    icon: Activity,
+    color: gameUIColors.info,
+    label: "LOADING",
+    subtitle: "Reading configuration...",
+    pulse: true
+  },
+  EMPTY: {
+    icon: HelpCircle,
+    color: 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
+ */
+export function useGameUIAlertState(stats, customStates) {
+  // Merge custom states with defaults
+  const alertStates = useMemo(() => ({
+    ...GAME_UI_ALERT_STATES,
+    ...customStates
+  }), [customStates]);
+
+  // Determine alert state based on stats
+  const alertState = 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 = useRef(new Animated.Value(1)).current;
+  const alertScale = useRef(new Animated.Value(1)).current;
+
+  // Animate on state change
+  useEffect(() => {
+    alertOpacity.setValue(0);
+    alertScale.setValue(0.95);
+    Animated.parallel([Animated.timing(alertOpacity, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true
+    }), Animated.timing(alertScale, {
+      toValue: 1,
+      duration: 300,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    })]).start();
+  }, [alertState, alertOpacity, alertScale]);
+  const alertAnimatedStyle = {
+    transform: [{
+      scale: alertScale
+    }],
+    opacity: alertOpacity
+  };
+  return {
+    alertState,
+    alertConfig,
+    alertAnimatedStyle,
+    alertOpacity,
+    alertScale
+  };
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+/**
+ * Game UI Design System Components
+ * Reusable components following cyberpunk/sci-fi aesthetic
+ */
+// Components
+export { GameUICollapsibleSection } from "./components/GameUICollapsibleSection.js";
+export { GameUIStatusHeader } from "./components/GameUIStatusHeader.js";
+export { GameUICompactStats } from "./components/GameUICompactStats.js";
+export { GameUIIssuesList } from "./components/GameUIIssuesList.js";
+// GameUIDevTestMode removed - test component no longer needed
+
+// Hooks
+export { useGameUIAlertState, GAME_UI_ALERT_STATES } from "./hooks/useGameUIAlertState.js";
+// Constants
+export { gameUIColors, dialColors, buoyColors } from "./constants/gameUIColors.js";
+// Also re-export macOS design system colors for apps that want the raw palette
+export { macOSColors } from "./constants/macOSDesignSystemColors.js";

package/lib/module/ui/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+// Re-export UI surface: components, console, gameUI
+
+// Components
+export * from "./components/index.js";
+
+// Console UI bits
+export { CyberpunkSectionButton } from "./console/CyberpunkSectionButton.js";
+
+// Game UI (colors, hooks, components)
+export * from "./gameUI/index.js";

package/lib/module/utils/displayValue.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import { serialize, deserialize } from "./minimalSuperJSON.js";
+
+/**
+ * Displays a string regardless the type of the data
+ * Uses minimal SuperJSON to properly serialize complex objects, avoiding [object Object].
+ * @param {unknown} value Value to be stringified
+ * @param {boolean} beautify Formats json to multiline
+ */
+export const displayValue = (value, beautify = false) => {
+  const {
+    json
+  } = serialize(value);
+  return JSON.stringify(json, null, beautify ? 2 : undefined);
+};
+
+/**
+ * Parses a string that was serialized with displayValue/minimal SuperJSON.
+ * Properly deserializes complex types like Date, RegExp, Map, Set, etc.
+ *
+ * @param value - The string to parse
+ * @returns The deserialized value
+ */
+export const parseDisplayValue = value => {
+  try {
+    const parsed = JSON.parse(value);
+    return deserialize({
+      json: parsed,
+      meta: undefined
+    });
+  } catch {
+    // Fallback to regular JSON.parse if not a SuperJSON serialized value
+    return JSON.parse(value);
+  }
+};