@buoy-gg/shared-ui 1.7.2

package/lib/module/icons/primitives/GlobeIcon.js

@@ -0,0 +1,61 @@
+"use strict";
+
+/**
+ * GlobeIcon - Cross-Platform Implementation
+ *
+ * This icon uses the shared primitives and works on both mobile and web!
+ * The primitives handle the platform-specific rendering.
+ */
+
+import { IconContainer, IconCircle } from "./icon-primitives.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Single source of truth for network icon color
+export const NETWORK_ICON_COLOR = '#4AFF9F'; // Green
+
+const colors = {
+  network: NETWORK_ICON_COLOR,
+  blackTint1: 'rgba(8, 12, 21, 0.95)'
+};
+export const GlobeIcon = ({
+  size = 24,
+  color = colors.network
+}) => {
+  const scale = size / 24;
+  const globeSize = 18 * scale;
+  const r = globeSize / 2;
+  const center = size / 2;
+  const borderWidth = 2 * scale;
+  return /*#__PURE__*/_jsxs(IconContainer, {
+    size: size,
+    children: [/*#__PURE__*/_jsx(IconCircle, {
+      cx: center,
+      cy: center,
+      r: r,
+      fill: colors.blackTint1,
+      borderColor: color,
+      borderWidth: borderWidth,
+      glowColor: color,
+      glowRadius: 4 * scale
+    }), /*#__PURE__*/_jsx(IconCircle, {
+      cx: center,
+      cy: center,
+      r: r,
+      borderColor: color,
+      borderWidth: borderWidth,
+      scaleX: 0.45,
+      opacity: 0.6
+    }), /*#__PURE__*/_jsx(IconCircle, {
+      cx: center,
+      cy: center,
+      r: r,
+      borderColor: color,
+      borderWidth: borderWidth,
+      scaleX: 1.33,
+      scaleY: 0.6,
+      opacity: 0.6
+    })]
+  });
+};
+
+// Alias for network tool
+export const NetworkGlobeIcon = GlobeIcon;

package/lib/module/icons/primitives/icon-primitives.js

@@ -0,0 +1,161 @@
+"use strict";
+
+/**
+ * Cross-Platform Icon Primitives - Mobile (React Native)
+ *
+ * These primitives render using React Native View components.
+ * The API matches the web version exactly, so icons work on both platforms!
+ */
+
+import { View } from 'react-native';
+
+// =============================
+// Types (Platform-Agnostic)
+// =============================
+import { jsx as _jsx } from "react/jsx-runtime";
+// =============================
+// Mobile (React Native) Implementation
+// =============================
+
+/**
+ * Container for icon elements. Sets up the coordinate space.
+ */
+export const IconContainer = ({
+  size,
+  children,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: size,
+      height: size,
+      position: 'relative'
+    }, style],
+    children: children
+  });
+};
+
+/**
+ * Circle primitive. Supports borders, fills, transforms, and glow effects.
+ */
+export const IconCircle = ({
+  cx,
+  cy,
+  r,
+  fill = 'transparent',
+  borderColor,
+  borderWidth = 0,
+  opacity = 1,
+  scaleX = 1,
+  scaleY = 1,
+  glowColor,
+  glowRadius = 4
+}) => {
+  const diameter = r * 2;
+
+  // Build transform array for React Native
+  const transforms = [];
+  if (scaleX !== 1) transforms.push({
+    scaleX
+  });
+  if (scaleY !== 1) transforms.push({
+    scaleY
+  });
+  const style = {
+    position: 'absolute',
+    left: cx - r,
+    top: cy - r,
+    width: diameter,
+    height: diameter,
+    borderRadius: r,
+    backgroundColor: fill,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    opacity,
+    transform: transforms.length > 0 ? transforms : undefined,
+    // Shadow for glow effect (iOS)
+    ...(glowColor && {
+      shadowColor: glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: 0.6,
+      shadowRadius: glowRadius
+    })
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+/**
+ * Rectangle primitive. Supports borders, fills, rotation.
+ */
+export const IconRect = ({
+  x,
+  y,
+  width,
+  height,
+  fill = 'transparent',
+  borderColor,
+  borderWidth = 0,
+  borderRadius = 0,
+  opacity = 1,
+  rotate
+}) => {
+  const transforms = [];
+  if (rotate !== undefined) transforms.push({
+    rotate: `${rotate}deg`
+  });
+  const style = {
+    position: 'absolute',
+    left: x,
+    top: y,
+    width,
+    height,
+    backgroundColor: fill,
+    borderWidth: borderWidth,
+    borderColor: borderColor,
+    borderRadius,
+    opacity,
+    transform: transforms.length > 0 ? transforms : undefined
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+/**
+ * Line primitive. Uses rotation to draw lines (same technique as web).
+ */
+export const IconLine = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  color,
+  strokeWidth = 2,
+  opacity = 1
+}) => {
+  // Calculate line length and angle
+  const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  const angle = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
+  const style = {
+    position: 'absolute',
+    left: x1,
+    top: y1 - strokeWidth / 2,
+    width: length,
+    height: strokeWidth,
+    backgroundColor: color,
+    transform: [{
+      rotate: `${angle}deg`
+    }],
+    transformOrigin: 'left center',
+    opacity,
+    borderRadius: strokeWidth / 2
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};

package/lib/module/icons/primitives/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+/**
+ * Cross-Platform Icon Primitives
+ *
+ * Export primitives that work on both mobile and web.
+ * Use these to build KISS icons (no color props).
+ */
+
+// Primitives for building icons
+export { IconContainer, IconCircle, IconRect, IconLine } from "./icon-primitives.js";
+
+// DEPRECATED: Old GlobeIcon with color prop - use NetworkIcon instead
+// Keeping for backward compatibility only
+export { GlobeIcon as PrimitiveGlobeIcon, NetworkGlobeIcon, NETWORK_ICON_COLOR } from "./GlobeIcon.js";

package/lib/module/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+// UI exports
+export * from "./ui/index.js";
+
+// Utils exports - selectively export to avoid conflicts
+export {
+// Display utilities
+displayValue, parseDisplayValue,
+// Safe area utilities
+getSafeAreaInsets,
+// Async storage utilities (legacy - wraps persistentStorage)
+safeGetItem, safeSetItem, safeRemoveItem, isPersistentStorageAvailable, useSafeAsyncStorage,
+// Persistent storage utilities (new)
+persistentStorage, isUsingPersistentStorage, getStorageBackendType,
+// String utilities
+safeStringify,
+// Type helper utilities (excluding isPlainObject due to conflict)
+getValueType, isPrimitive, isJsonSerializable, isValidJson, getConstructorName, isEmpty, getValueSize,
+// Value formatting utilities
+parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath,
+// Optional module loading utilities
+loadOptionalModule, getCachedOptionalModule } from "./utils/index.js";
+
+// Also export formatting utils
+export * from "./utils/formatting/index.js";
+export * from "./utils/time/index.js";
+
+// Type helper's isPlainObject as isPlainObjectUtil to avoid conflict
+export { isPlainObject as isPlainObjectUtil } from "./utils/typeHelpers.js";
+
+// Icons exports
+export * from "./icons/index.js";
+
+// Other exports
+export * from "./clipboard/index.js";
+export * from "./logger/index.js";
+export * from "./settings/index.js";
+export * from "./storage/index.js";
+export { useSafeAreaInsets, useFilterManager, useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./hooks/index.js";
+
+// JsModal
+export { JsModal } from "./JsModal.js";
+// game ui colors
+export { gameUIColors, buoyColors } from "./ui/gameUI/constants/gameUIColors.js";
+export { macOSColors } from "./ui/gameUI/constants/macOSDesignSystemColors.js";
+export { dialColors } from "./ui/gameUI/constants/gameUIColors.js";
+//EnvironmentIndicator
+export { EnvironmentIndicator } from "./env/EnvironmentIndicator.js";
+// EnvironmentSelector
+export { EnvironmentSelector } from "./env/EnvironmentSelector.js";
+// EnvironmentSelectorInline
+export { EnvironmentSelectorInline } from "./env/EnvironmentSelectorInline.js";
+// Context exports
+export { HintsProvider, useHintsDisabled, useHintsContext } from "./context/index.js";
+
+// License/Feature gating exports
+export { FeatureGate, UpgradePrompt, useFeatureGate, ProFeatureBanner, UpgradeModal, LicenseEntryModal, ManageDevicesModal, ProBadge, ProUpgradeModal } from "./license/index.js";