@buoy-gg/shared-ui 1.7.2

package/lib/module/hooks/useSafeAreaInsets.js

@@ -0,0 +1,250 @@
+"use strict";
+
+import { useState, useEffect } from "react";
+import { Platform, Dimensions, StatusBar } from "react-native";
+import { useNativeSafeAreaInsets, hasSafeAreaPackage, safeAreaType } from "./safe-area-impl.js";
+
+// Types
+
+// Device detection map for iOS
+const iPhoneDimensionMap = {
+  // iPhone 14 Pro, 14 Pro Max, 15, 15 Plus, 15 Pro, 15 Pro Max, 16 series (Dynamic Island)
+  "393,852": {
+    top: 59,
+    bottom: 34
+  },
+  // 14 Pro, 15, 15 Pro, 16, 16 Pro
+  "430,932": {
+    top: 59,
+    bottom: 34
+  },
+  // 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus, 16 Pro Max
+
+  // iPhone 12, 12 Pro, 13, 13 Pro, 14
+  "390,844": {
+    top: 47,
+    bottom: 34
+  },
+  // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
+  "428,926": {
+    top: 47,
+    bottom: 34
+  },
+  // iPhone 12 mini, 13 mini (newer value takes precedence)
+  "375,812": {
+    top: 50,
+    bottom: 34
+  },
+  // iPhone XR, 11
+  "414,896": {
+    top: 48,
+    bottom: 34
+  }
+};
+
+/**
+ * Pure JavaScript implementation for calculating safe area insets
+ * Uses device dimensions mapping for iOS and platform APIs for Android
+ *
+ * @returns SafeAreaInsets object with top, bottom, left, right values
+ *
+ * @performance Optimized for iOS with dimension-based mapping table
+ * Device recognition uses screen dimensions as lookup key
+ */
+const getPureJSSafeAreaInsets = () => {
+  if (Platform.OS === "android") {
+    const androidVersion = Platform.Version;
+    const statusBarHeight = StatusBar.currentHeight || 0;
+
+    // Android 10+ with gesture navigation typically has bottom insets
+    const hasGestureNav = androidVersion >= 29;
+    return {
+      top: statusBarHeight,
+      bottom: hasGestureNav ? 20 : 0,
+      // Approximate gesture bar height
+      left: 0,
+      right: 0
+    };
+  }
+
+  // iOS
+  const {
+    width,
+    height
+  } = Dimensions.get("window");
+  const dimensionKey = `${width},${height}`;
+  const deviceInsets = iPhoneDimensionMap[dimensionKey];
+  if (deviceInsets) {
+    return {
+      ...deviceInsets,
+      left: 0,
+      right: 0
+    };
+  }
+
+  // Default for older iPhones without notch
+  return {
+    top: 20,
+    // Standard status bar
+    bottom: 0,
+    left: 0,
+    right: 0
+  };
+};
+
+// Note: Native safe area support is detected at install time by scripts/detect-safe-area.js
+// The useNativeSafeAreaInsets hook is imported from the generated safe-area-impl.ts file
+// This uses SafeAreaInsetsContext directly with useContext(), which returns null when
+// no SafeAreaProvider is present (instead of throwing an error like useSafeAreaInsets does)
+
+/**
+ * Custom hook for accessing safe area insets with automatic fallback
+ *
+ * Provides safe area insets for proper UI positioning on devices with notches,
+ * dynamic islands, and status bars. Automatically detects and uses the native
+ * react-native-safe-area-context package when available, falling back to a
+ * pure JavaScript implementation when not available.
+ *
+ * @param options - Configuration options for minimum inset values
+ * @param options.minTop - Minimum top inset value (overrides calculated value if larger)
+ * @param options.minBottom - Minimum bottom inset value (overrides calculated value if larger)
+ * @param options.minLeft - Minimum left inset value (overrides calculated value if larger)
+ * @param options.minRight - Minimum right inset value (overrides calculated value if larger)
+ *
+ * @returns SafeAreaInsets object with top, bottom, left, right pixel values
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const insets = useSafeAreaInsets();
+ * const topPadding = insets.top;
+ *
+ * // With minimum values
+ * const insets = useSafeAreaInsets({
+ *   minTop: 20,
+ *   minBottom: 10
+ * });
+ * ```
+ *
+ * @performance Uses pure JS fallback with device dimension mapping for iOS
+ * @performance Automatically handles orientation changes with dimension listener
+ * @performance Memoizes native package detection at module level
+ */
+export const useSafeAreaInsets = (options = {}) => {
+  // Always call the native hook unconditionally (returns null if not available)
+  const nativeInsets = useNativeSafeAreaInsets();
+
+  // Fallback state for pure JS implementation
+  const [fallbackInsets, setFallbackInsets] = useState(() => getPureJSSafeAreaInsets());
+  useEffect(() => {
+    // Only set up orientation listener if using fallback
+    if (!nativeInsets) {
+      const updateInsets = () => {
+        setFallbackInsets(getPureJSSafeAreaInsets());
+      };
+      const subscription = Dimensions.addEventListener("change", updateInsets);
+      return () => {
+        subscription?.remove();
+      };
+    }
+  }, [nativeInsets]); // Dependency on nativeInsets
+
+  const baseInsets = nativeInsets || fallbackInsets;
+
+  // Apply minimum values - handles both 0 values and values less than minimum
+  const finalInsets = {
+    top: options.minTop !== undefined ? Math.max(baseInsets.top, options.minTop) : baseInsets.top,
+    bottom: options.minBottom !== undefined ? Math.max(baseInsets.bottom, options.minBottom) : baseInsets.bottom,
+    left: options.minLeft !== undefined ? Math.max(baseInsets.left, options.minLeft) : baseInsets.left,
+    right: options.minRight !== undefined ? Math.max(baseInsets.right, options.minRight) : baseInsets.right
+  };
+  return finalInsets;
+};
+
+/**
+ * Utility function to detect if the current device has a notch or dynamic island
+ *
+ * @returns True if the device has a notch/dynamic island, false otherwise
+ *
+ * @example
+ * ```typescript
+ * if (hasNotch()) {
+ *   // Apply special styling for notched devices
+ *   console.log('Device has notch or dynamic island');
+ * }
+ * ```
+ */
+export const hasNotch = () => {
+  const insets = getPureJSSafeAreaInsets();
+  if (Platform.OS === "android") {
+    // Android with tall status bar might have notch
+    return insets.top > 24;
+  }
+
+  // iOS with top inset > 20 has notch or dynamic island
+  return insets.top > 20;
+};
+
+/**
+ * Configuration helper for safe area implementation management
+ *
+ * Provides utilities for checking native package availability,
+ * forcing pure JS implementation, and getting implementation type info
+ */
+export const SafeAreaConfig = {
+  /**
+   * Check if the native react-native-safe-area-context package is available
+   * This is detected at install time by scripts/detect-safe-area.js
+   *
+   * @returns True if native package is installed and available
+   */
+  hasNativeSupport: () => hasSafeAreaPackage,
+  /**
+   * Force pure JS implementation (useful for testing)
+   * Set to true to disable native package usage even when available
+   */
+  forcePureJS: false,
+  /**
+   * Get current implementation type being used
+   * Detected at install time by scripts/detect-safe-area.js
+   *
+   * @returns "native" if using react-native-safe-area-context, "pure-js" if using fallback
+   */
+  getImplementationType: () => {
+    if (SafeAreaConfig.forcePureJS) return "pure-js";
+    return safeAreaType;
+  }
+};
+
+/**
+ * Compatibility hook that returns the window frame dimensions
+ *
+ * @returns Frame object with x, y, width, height properties
+ *
+ * @deprecated Use Dimensions.get("window") directly instead
+ */
+export const useSafeAreaFrame = () => {
+  const {
+    width,
+    height
+  } = Dimensions.get("window");
+  return {
+    x: 0,
+    y: 0,
+    width,
+    height
+  };
+};
+
+/**
+ * Export the pure JS implementation directly for compatibility
+ *
+ * @returns SafeAreaInsets calculated using pure JavaScript implementation
+ *
+ * @example
+ * ```typescript
+ * const insets = getSafeAreaInsets();
+ * console.log(`Top inset: ${insets.top}px`);
+ * ```
+ */
+export const getSafeAreaInsets = getPureJSSafeAreaInsets;

package/lib/module/icons/BenchmarkIcon.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BenchmarkIcon - Icon for the BENCHMARK dev tool
+ * Shows a stopwatch with performance bars, representing
+ * performance measurement and benchmarking functionality.
+ */
+export const BenchmarkIcon = ({
+  size = 24,
+  color = "#F59E0B",
+  glowColor
+}) => {
+  const scale = size / 24;
+  const activeColor = color;
+  const activeGlow = glowColor || color;
+
+  // Center the stopwatch in the icon area
+  const centerX = size / 2;
+  const centerY = size / 2 + 1 * scale; // Slightly lower to account for button
+  const clockRadius = 7 * scale;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      position: "relative",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: clockRadius * 2,
+        height: clockRadius * 2,
+        borderRadius: clockRadius,
+        borderWidth: 1.5 * scale,
+        borderColor: activeColor,
+        backgroundColor: "transparent",
+        left: centerX - clockRadius,
+        top: centerY - clockRadius,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 10 * scale,
+        height: 10 * scale,
+        borderRadius: 5 * scale,
+        backgroundColor: activeGlow,
+        left: centerX - 5 * scale,
+        top: centerY - 5 * scale,
+        opacity: 0.15
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 4 * scale,
+        height: 3 * scale,
+        borderRadius: 1 * scale,
+        backgroundColor: activeColor,
+        left: centerX - 2 * scale,
+        top: centerY - clockRadius - 3 * scale,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 2 * scale,
+        height: 2 * scale,
+        backgroundColor: activeColor,
+        left: centerX - 1 * scale,
+        top: centerY - clockRadius - 0.5 * scale,
+        opacity: 0.9
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 1.5 * scale,
+        height: 5 * scale,
+        borderRadius: 1 * scale,
+        backgroundColor: activeColor,
+        left: centerX - 0.75 * scale,
+        top: centerY - 5 * scale,
+        opacity: 0.9,
+        transform: [{
+          rotate: "-45deg"
+        }],
+        transformOrigin: "bottom center"
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 2 * scale,
+        height: 2 * scale,
+        borderRadius: 1 * scale,
+        backgroundColor: activeColor,
+        left: centerX - 1 * scale,
+        top: centerY - 1 * scale,
+        opacity: 0.9
+      }
+    })]
+  });
+};

package/lib/module/icons/EnvLaptopIcon.js

@@ -0,0 +1,199 @@
+"use strict";
+
+import { View } from "react-native";
+import { IconBackground } from "./IconBackground.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPresets = {
+  green: {
+    color: "#00FF88",
+    glow: "#00FF88"
+  },
+  cyan: {
+    color: "#00D4FF",
+    glow: "#00D4FF"
+  },
+  purple: {
+    color: "#9945FF",
+    glow: "#9945FF"
+  },
+  pink: {
+    color: "#FF45FF",
+    glow: "#FF45FF"
+  },
+  yellow: {
+    color: "#FFD700",
+    glow: "#FFD700"
+  },
+  orange: {
+    color: "#FF8800",
+    glow: "#FF8800"
+  }
+};
+
+// Keyboard layout - two rows of keys for realistic appearance
+const KEYBOARD_ROW_1 = [1, 3, 5, 7, 9, 11, 13, 15, 17]; // Top row keys
+const KEYBOARD_ROW_2 = [2, 4, 6, 8, 10, 12, 14, 16]; // Bottom row keys
+const SPACEBAR = {
+  x: 5,
+  width: 10,
+  y: 5.5
+}; // Spacebar
+
+// Simplified screen dots
+const SCREEN_DOTS = [{
+  x: 0.3,
+  y: 0.3
+}, {
+  x: 0.7,
+  y: 0.3
+}, {
+  x: 0.5,
+  y: 0.7
+}];
+export const EnvLaptopIcon = ({
+  size = 24,
+  color,
+  glowColor,
+  colorPreset = "green",
+  variant = "circuit",
+  noBackground = true
+}) => {
+  const scale = noBackground ? size / 24 : size / 40;
+  const preset = ColorPresets[colorPreset] || ColorPresets.green;
+  const activeColor = color || preset.color;
+  const activeGlow = glowColor || preset.glow;
+  const iconContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "absolute",
+        width: 20 * scale,
+        height: 8 * scale,
+        backgroundColor: activeColor,
+        borderRadius: 1 * scale,
+        left: size / 2 - 10 * scale,
+        top: size / 2 + 4 * scale,
+        opacity: 0.85
+      },
+      children: [KEYBOARD_ROW_1.map((x, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 1.5 * scale,
+          height: 1.2 * scale,
+          backgroundColor: "#000",
+          opacity: 0.3,
+          left: x * scale,
+          top: 1.5 * scale,
+          borderRadius: 0.2 * scale
+        }
+      }, `key1-${i}`)), KEYBOARD_ROW_2.map((x, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 1.5 * scale,
+          height: 1.2 * scale,
+          backgroundColor: "#000",
+          opacity: 0.3,
+          left: x * scale,
+          top: 3.2 * scale,
+          borderRadius: 0.2 * scale
+        }
+      }, `key2-${i}`)), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: SPACEBAR.width * scale,
+          height: 1 * scale,
+          backgroundColor: "#000",
+          opacity: 0.25,
+          left: SPACEBAR.x * scale,
+          top: SPACEBAR.y * scale,
+          borderRadius: 0.2 * scale
+        }
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 22 * scale,
+        height: 10 * scale,
+        backgroundColor: activeGlow,
+        borderRadius: 1 * scale,
+        left: size / 2 - 11 * scale,
+        top: size / 2 + 3 * scale,
+        opacity: 0.15
+      }
+    }), /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "absolute",
+        width: 18 * scale,
+        height: 12 * scale,
+        backgroundColor: activeColor,
+        borderRadius: 1 * scale,
+        left: size / 2 - 9 * scale,
+        top: size / 2 - 10 * scale,
+        opacity: 0.9
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 16 * scale,
+          height: 10 * scale,
+          backgroundColor: "#000",
+          opacity: 0.5,
+          left: 1 * scale,
+          top: 1 * scale,
+          borderRadius: 0.5 * scale
+        }
+      }), [2, 4, 6].map((y, i) => /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: (10 - i * 3) * scale,
+          height: 0.5 * scale,
+          backgroundColor: activeGlow,
+          opacity: 0.6,
+          left: 2 * scale,
+          top: y * scale
+        }
+      }, i))]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 2 * scale,
+        height: 1 * scale,
+        backgroundColor: activeGlow,
+        borderRadius: 0.5 * scale,
+        left: size / 2 - 1 * scale,
+        top: size / 2 + 10 * scale,
+        opacity: 0.8
+      }
+    }), SCREEN_DOTS.map((dot, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 1 * scale,
+        height: 1 * scale,
+        borderRadius: 0.5 * scale,
+        backgroundColor: activeGlow,
+        left: size / 2 - 9 * scale + dot.x * 18 * scale,
+        top: size / 2 - 10 * scale + dot.y * 12 * scale,
+        opacity: 0.4
+      }
+    }, `dot-${i}`))]
+  });
+  if (noBackground) {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: iconContent
+    });
+  }
+  return /*#__PURE__*/_jsx(IconBackground, {
+    size: size,
+    glowColor: activeGlow,
+    variant: variant,
+    children: iconContent
+  });
+};
+export const ServerIcon = EnvLaptopIcon;
+export const LaptopIcon = EnvLaptopIcon;