@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/lib/module/ui/backgrounds/variants/wormhole.js

@@ -0,0 +1,129 @@
+"use strict";
+
+import { memo, useEffect, useState } from "react";
+import { AccessibilityInfo, Animated, Image, View, useWindowDimensions } from "react-native";
+import { absoluteFill } from "../../../utils/absoluteFill.js";
+import { useLoop } from "../primitives.js";
+import { WORMHOLE_STILL, WORMHOLE_SHEET, WORMHOLE_CORE } from "./wormhole/textures.js";
+import { WORMHOLE_CYCLE_MS, WORMHOLE_INPUT, WORMHOLE_SHELLS, WORMHOLE_CAMERA_ROTATION } from "./wormhole/motion.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fill = {
+  width: "100%",
+  height: "100%"
+};
+
+/** Dependency-free mobile preview, textured from the production GLSL wormhole.
+ * This is a native-composited approximation, not a live volumetric shader.
+ * One Animated clock, no JS frame callbacks, no third-party native renderer.
+ *
+ * Two copies of a self-similar cloud sheet zoom toward the viewer one period
+ * apart; because the sheet is the same picture at ×2 and +21°, the copies are
+ * pixel-identical wherever they overlap and their crossfade is invisible (see
+ * motion.ts). The destination never zooms: it is a static cut of the same
+ * frame, drawn above the sheets. Geometry follows the window; resizing a tool
+ * crops rather than stretches it. The eye lands on `focus` (the dial pins it
+ * to the hub); the plane is always bigger than any surface, so moving the
+ * eye only changes which part of the tunnel is in view.
+ */
+/** Where the eye sits when the host doesn't pin it: a little right and above centre. */
+const DEFAULT_FOCUS = {
+  x: 0.54,
+  y: 0.46
+};
+export const Wormhole = /*#__PURE__*/memo(function Wormhole({
+  width,
+  height,
+  animated,
+  focus = DEFAULT_FOCUS
+}) {
+  const window = useWindowDimensions();
+  // Default to still until the accessibility preference is known.
+  const [reduced, setReduced] = useState(true);
+  useEffect(() => {
+    let live = true;
+    let changed = false;
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", value => {
+      changed = true;
+      setReduced(value);
+    });
+    void AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (live && !changed) setReduced(value);
+    }).catch(() => {/* Keep the still scene when the preference is unavailable. */});
+    return () => {
+      live = false;
+      subscription.remove();
+    };
+  }, []);
+  const moving = animated && !reduced;
+  const clock = useLoop(WORMHOLE_CYCLE_MS, moving);
+  const diameter = Math.ceil(Math.hypot(window.width, window.height) * 1.08);
+  const plane = {
+    position: "absolute",
+    left: width * focus.x - diameter / 2,
+    top: height * focus.y - diameter / 2,
+    width: diameter,
+    height: diameter
+  };
+  const camera = {
+    transform: [{
+      rotate: clock.interpolate({
+        inputRange: WORMHOLE_INPUT,
+        outputRange: WORMHOLE_CAMERA_ROTATION
+      })
+    }]
+  };
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: [absoluteFill, {
+      overflow: "hidden",
+      backgroundColor: "#030a1c"
+    }],
+    children: moving ? /*#__PURE__*/_jsxs(Animated.View, {
+      style: [plane, camera],
+      children: [WORMHOLE_SHELLS.map((shell, i) => /*#__PURE__*/_jsx(Animated.View, {
+        style: [absoluteFill, {
+          opacity: clock.interpolate({
+            inputRange: WORMHOLE_INPUT,
+            outputRange: shell.opacity
+          }),
+          transform: [{
+            scale: clock.interpolate({
+              inputRange: WORMHOLE_INPUT,
+              outputRange: shell.scale
+            })
+          }, {
+            rotate: clock.interpolate({
+              inputRange: WORMHOLE_INPUT,
+              outputRange: shell.rotate
+            })
+          }]
+        }],
+        children: /*#__PURE__*/_jsx(Image, {
+          source: WORMHOLE_SHEET,
+          resizeMode: "stretch",
+          fadeDuration: 0,
+          style: fill
+        })
+      }, i)), /*#__PURE__*/_jsx(Image, {
+        source: WORMHOLE_CORE,
+        resizeMode: "stretch",
+        fadeDuration: 0,
+        style: {
+          position: "absolute",
+          left: diameter / 4,
+          top: diameter / 4,
+          width: diameter / 2,
+          height: diameter / 2
+        }
+      })]
+    }) : /*#__PURE__*/_jsx(Animated.View, {
+      style: [plane, camera],
+      children: /*#__PURE__*/_jsx(Image, {
+        source: WORMHOLE_STILL,
+        resizeMode: "stretch",
+        fadeDuration: 0,
+        style: fill
+      })
+    })
+  });
+});

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

@@ -11,6 +11,7 @@
 import { memo, useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Modal, Pressable } from "react-native";
 import { gameUIColors } from "../gameUI/index.js";
+import { Copy } from "../../icons/lucide-icons.js";
 import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -39,9 +40,10 @@ export const ClipboardHintBanner = /*#__PURE__*/memo(function ClipboardHintBanne
           style: styles.inner,
           children: [/*#__PURE__*/_jsx(View, {
             style: styles.iconContainer,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.iconText,
-              children: "\uD83D\uDCCB"
+            children: /*#__PURE__*/_jsx(Copy, {
+              size: 22,
+              color: gameUIColors.info,
+              strokeWidth: 2
             })
           }), /*#__PURE__*/_jsxs(View, {
             style: styles.messageContainer,
@@ -106,9 +108,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center"
   },
-  iconText: {
-    fontSize: 24
-  },
   messageContainer: {
     gap: 8
   },

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

@@ -28,7 +28,8 @@ export function CompactRow({
   statusSublabelTestID,
   primaryTestID,
   secondaryTestID,
-  accessibilityLabel
+  accessibilityLabel,
+  trailingAction
 }) {
   return /*#__PURE__*/_jsx(View, {
     style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
@@ -41,83 +42,90 @@ export function CompactRow({
         borderBottomColor: expandedGlowColor || night.color.accent,
         shadowColor: expandedGlowColor || night.color.accent
       }]],
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onPress,
-        activeOpacity: 0.8,
-        disabled: disabled || !onPress,
-        testID: testID,
-        accessibilityLabel: accessibilityLabel
-        // Label alone is not enough on Fabric: a row that announces text but
-        // no role reads to VoiceOver as static content, so the fact that it
-        // opens something is only discoverable by tapping it.
-        ,
-        accessibilityRole: onPress ? "button" : undefined,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.rowContent,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.statusSection,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.statusDot, {
-                backgroundColor: statusDotColor
-              }]
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerRow,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.headerPress,
+          onPress: onPress,
+          activeOpacity: 0.8,
+          disabled: disabled || !onPress,
+          testID: testID,
+          accessibilityLabel: accessibilityLabel
+          // Label alone is not enough on Fabric: a row that announces text but
+          // no role reads to VoiceOver as static content, so the fact that it
+          // opens something is only discoverable by tapping it.
+          ,
+          accessibilityRole: onPress ? "button" : undefined,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.rowContent,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.statusSection,
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.statusDot, {
+                  backgroundColor: statusDotColor
+                }]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.statusInfo,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.statusLabel, {
+                    color: statusDotColor
+                  }],
+                  numberOfLines: 1,
+                  testID: statusTestID,
+                  children: statusLabel
+                }), statusSublabel ? /*#__PURE__*/_jsx(Text, {
+                  style: styles.observerText,
+                  numberOfLines: 1,
+                  testID: statusSublabelTestID,
+                  children: statusSublabel
+                }) : null]
+              })]
             }), /*#__PURE__*/_jsxs(View, {
-              style: styles.statusInfo,
+              style: styles.querySection,
               children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.statusLabel, {
-                  color: statusDotColor
-                }],
-                numberOfLines: 1,
-                testID: statusTestID,
-                children: statusLabel
-              }), statusSublabel ? /*#__PURE__*/_jsx(Text, {
-                style: styles.observerText,
-                numberOfLines: 1,
-                testID: statusSublabelTestID,
-                children: statusSublabel
+                style: styles.queryHash,
+                numberOfLines: isExpanded ? undefined : 2,
+                testID: primaryTestID,
+                children: primaryText
+              }), !isExpanded && (secondaryText || secondaryAccessory) ? /*#__PURE__*/_jsxs(View, {
+                style: styles.secondaryRow,
+                children: [secondaryText ? /*#__PURE__*/_jsx(Text, {
+                  style: styles.secondaryText,
+                  numberOfLines: 1,
+                  testID: secondaryTestID,
+                  children: secondaryText
+                }) : null, secondaryAccessory]
               }) : null]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.rightSection,
+              children: [(customBadge || badgeText !== undefined || !isExpanded && bottomRightText) && /*#__PURE__*/_jsxs(View, {
+                style: styles.badgeContainer,
+                children: [customBadge ? customBadge : badgeText !== undefined ? /*#__PURE__*/_jsx(Text, {
+                  style: [styles.statusBadge, {
+                    color: badgeColor || statusDotColor
+                  }],
+                  children: badgeText
+                }) : null, !isExpanded && bottomRightText ? /*#__PURE__*/_jsx(Text, {
+                  style: styles.bottomRightText,
+                  numberOfLines: 1,
+                  children: bottomRightText
+                }) : null]
+              }), showChevron && /*#__PURE__*/_jsx(View, {
+                style: styles.chevronContainer,
+                children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+                  size: 14,
+                  color: night.color.textTertiary
+                }) : /*#__PURE__*/_jsx(ChevronRight, {
+                  size: 14,
+                  color: night.color.textTertiary
+                })
+              })]
             })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.querySection,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.queryHash,
-              numberOfLines: isExpanded ? undefined : 2,
-              testID: primaryTestID,
-              children: primaryText
-            }), !isExpanded && (secondaryText || secondaryAccessory) ? /*#__PURE__*/_jsxs(View, {
-              style: styles.secondaryRow,
-              children: [secondaryText ? /*#__PURE__*/_jsx(Text, {
-                style: styles.secondaryText,
-                numberOfLines: 1,
-                testID: secondaryTestID,
-                children: secondaryText
-              }) : null, secondaryAccessory]
-            }) : null]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.rightSection,
-            children: [(customBadge || badgeText !== undefined || !isExpanded && bottomRightText) && /*#__PURE__*/_jsxs(View, {
-              style: styles.badgeContainer,
-              children: [customBadge ? customBadge : badgeText !== undefined ? /*#__PURE__*/_jsx(Text, {
-                style: [styles.statusBadge, {
-                  color: badgeColor || statusDotColor
-                }],
-                children: badgeText
-              }) : null, !isExpanded && bottomRightText ? /*#__PURE__*/_jsx(Text, {
-                style: styles.bottomRightText,
-                numberOfLines: 1,
-                children: bottomRightText
-              }) : null]
-            }), showChevron && /*#__PURE__*/_jsx(View, {
-              style: styles.chevronContainer,
-              children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-                size: 14,
-                color: night.color.textTertiary
-              }) : /*#__PURE__*/_jsx(ChevronRight, {
-                size: 14,
-                color: night.color.textTertiary
-              })
-            })]
-          })]
-        })
+          })
+        }), trailingAction ? /*#__PURE__*/_jsx(View, {
+          style: styles.trailingAction,
+          children: trailingAction
+        }) : null]
       }), isExpanded && expandedContent && /*#__PURE__*/_jsx(View, {
         style: styles.expandedContent,
         children: expandedContent
@@ -185,6 +193,18 @@ const styles = StyleSheet.create({
     shadowRadius: 20,
     elevation: 10
   },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  headerPress: {
+    flex: 1,
+    minWidth: 0
+  },
+  trailingAction: {
+    marginLeft: 8,
+    justifyContent: "center"
+  },
   rowContent: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -36,6 +36,9 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
   },
   style,
   enabled = true,
+  claimOnMove = true,
+  onLayout,
+  hitSlop,
   maxOverflowX = 0,
   testID,
   accessibilityLabel
@@ -72,6 +75,7 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
     elementSize,
     minPosition,
     enabled,
+    claimOnMove,
     maxOverflowX
   });
   propsRef.current = {
@@ -84,6 +88,7 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
     elementSize,
     minPosition,
     enabled,
+    claimOnMove,
     maxOverflowX
   };
   const panResponder = useMemo(() => {
@@ -95,7 +100,7 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
     };
     return PanResponder.create({
       onStartShouldSetPanResponder: () => propsRef.current.enabled,
-      onMoveShouldSetPanResponder: (_, g) => propsRef.current.enabled && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
+      onMoveShouldSetPanResponder: (_, g) => propsRef.current.enabled && propsRef.current.claimOnMove && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
       onPanResponderTerminationRequest: () => false,
       onPanResponderGrant: () => {
         isDraggingRef.current = false;
@@ -188,8 +193,18 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
   }, [position]);
   return /*#__PURE__*/_jsx(View, {
     style: style,
+    onLayout: onLayout,
+    hitSlop: hitSlop,
     testID: testID,
     accessibilityLabel: accessibilityLabel,
+    accessibilityRole: onTap ? "button" : undefined,
+    accessibilityActions: onTap ? [{
+      name: "activate",
+      label: "Hide or show"
+    }] : undefined,
+    onAccessibilityAction: event => {
+      if (event.nativeEvent.actionName === "activate") propsRef.current.onTap?.();
+    },
     ...panResponder.panHandlers,
     children: children
   });

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

@@ -3,25 +3,28 @@
 import { TouchableOpacity, StyleSheet } from "react-native";
 import { Search } from "../../icons/index.js";
 import { gameUIColors } from "../gameUI/index.js";
+import { night } from "../night/nightTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function HeaderSearchButton({
   onPress,
   size = 14,
-  color = gameUIColors.secondary,
+  color,
   style,
   accessibilityLabel = "Search",
-  testID
+  testID,
+  variant = "plain"
 }) {
+  const chip = variant === "chip";
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     onPress: onPress,
-    style: [styles.button, style],
+    style: [chip ? styles.chip : styles.button, style],
     activeOpacity: 0.7,
     accessibilityRole: "button",
     accessibilityLabel: accessibilityLabel,
     testID: testID,
     children: /*#__PURE__*/_jsx(Search, {
       size: size,
-      color: color
+      color: color ?? (chip ? night.color.textSecondary : gameUIColors.secondary)
     })
   });
 }
@@ -29,5 +32,15 @@ const styles = StyleSheet.create({
   button: {
     padding: 8,
     borderRadius: 4
+  },
+  chip: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: night.color.buttonSurface,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    alignItems: "center",
+    justifyContent: "center"
   }
 });