@buoy-gg/shared-ui 7.0.35 → 7.0.38

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wormhole = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
+var _primitives = require("../primitives.js");
+var _textures = require("./wormhole/textures.js");
+var _motion = require("./wormhole/motion.js");
+var _jsxRuntime = require("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
+};
+const Wormhole = exports.Wormhole = /*#__PURE__*/(0, _react.memo)(function Wormhole({
+  width,
+  height,
+  animated,
+  focus = DEFAULT_FOCUS
+}) {
+  const window = (0, _reactNative.useWindowDimensions)();
+  // Default to still until the accessibility preference is known.
+  const [reduced, setReduced] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    let live = true;
+    let changed = false;
+    const subscription = _reactNative.AccessibilityInfo.addEventListener("reduceMotionChanged", value => {
+      changed = true;
+      setReduced(value);
+    });
+    void _reactNative.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 = (0, _primitives.useLoop)(_motion.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: _motion.WORMHOLE_INPUT,
+        outputRange: _motion.WORMHOLE_CAMERA_ROTATION
+      })
+    }]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    style: [_absoluteFill.absoluteFill, {
+      overflow: "hidden",
+      backgroundColor: "#030a1c"
+    }],
+    children: moving ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: [plane, camera],
+      children: [_motion.WORMHOLE_SHELLS.map((shell, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [_absoluteFill.absoluteFill, {
+          opacity: clock.interpolate({
+            inputRange: _motion.WORMHOLE_INPUT,
+            outputRange: shell.opacity
+          }),
+          transform: [{
+            scale: clock.interpolate({
+              inputRange: _motion.WORMHOLE_INPUT,
+              outputRange: shell.scale
+            })
+          }, {
+            rotate: clock.interpolate({
+              inputRange: _motion.WORMHOLE_INPUT,
+              outputRange: shell.rotate
+            })
+          }]
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: _textures.WORMHOLE_SHEET,
+          resizeMode: "stretch",
+          fadeDuration: 0,
+          style: fill
+        })
+      }, i)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: _textures.WORMHOLE_CORE,
+        resizeMode: "stretch",
+        fadeDuration: 0,
+        style: {
+          position: "absolute",
+          left: diameter / 4,
+          top: diameter / 4,
+          width: diameter / 2,
+          height: diameter / 2
+        }
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [plane, camera],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        source: _textures.WORMHOLE_STILL,
+        resizeMode: "stretch",
+        fadeDuration: 0,
+        style: fill
+      })
+    })
+  });
+});

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

@@ -7,6 +7,7 @@ exports.ClipboardHintBanner = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("../gameUI/index.js");
+var _lucideIcons = require("../../icons/lucide-icons.js");
 var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -43,9 +44,10 @@ const ClipboardHintBanner = exports.ClipboardHintBanner = /*#__PURE__*/(0, _reac
           style: styles.inner,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: styles.iconContainer,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.iconText,
-              children: "\uD83D\uDCCB"
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Copy, {
+              size: 22,
+              color: _index.gameUIColors.info,
+              strokeWidth: 2
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.messageContainer,
@@ -110,9 +112,6 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     alignItems: "center"
   },
-  iconText: {
-    fontSize: 24
-  },
   messageContainer: {
     gap: 8
   },

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

@@ -32,7 +32,8 @@ function CompactRow({
   statusSublabelTestID,
   primaryTestID,
   secondaryTestID,
-  accessibilityLabel
+  accessibilityLabel,
+  trailingAction
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.rowWrapper, isExpanded && styles.rowWrapperExpanded],
@@ -45,83 +46,90 @@ function CompactRow({
         borderBottomColor: expandedGlowColor || _nightTheme.night.color.accent,
         shadowColor: expandedGlowColor || _nightTheme.night.color.accent
       }]],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.rowContent,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.statusSection,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.statusDot, {
-                backgroundColor: statusDotColor
-              }]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.headerRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.rowContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.statusSection,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.statusDot, {
+                  backgroundColor: statusDotColor
+                }]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.statusInfo,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.statusLabel, {
+                    color: statusDotColor
+                  }],
+                  numberOfLines: 1,
+                  testID: statusTestID,
+                  children: statusLabel
+                }), statusSublabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.observerText,
+                  numberOfLines: 1,
+                  testID: statusSublabelTestID,
+                  children: statusSublabel
+                }) : null]
+              })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.statusInfo,
+              style: styles.querySection,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.statusLabel, {
-                  color: statusDotColor
-                }],
-                numberOfLines: 1,
-                testID: statusTestID,
-                children: statusLabel
-              }), statusSublabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.secondaryRow,
+                children: [secondaryText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.secondaryText,
+                  numberOfLines: 1,
+                  testID: secondaryTestID,
+                  children: secondaryText
+                }) : null, secondaryAccessory]
               }) : null]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.rightSection,
+              children: [(customBadge || badgeText !== undefined || !isExpanded && bottomRightText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.badgeContainer,
+                children: [customBadge ? customBadge : badgeText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.statusBadge, {
+                    color: badgeColor || statusDotColor
+                  }],
+                  children: badgeText
+                }) : null, !isExpanded && bottomRightText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.bottomRightText,
+                  numberOfLines: 1,
+                  children: bottomRightText
+                }) : null]
+              }), showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: styles.chevronContainer,
+                children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+                  size: 14,
+                  color: _nightTheme.night.color.textTertiary
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
+                  size: 14,
+                  color: _nightTheme.night.color.textTertiary
+                })
+              })]
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.querySection,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.queryHash,
-              numberOfLines: isExpanded ? undefined : 2,
-              testID: primaryTestID,
-              children: primaryText
-            }), !isExpanded && (secondaryText || secondaryAccessory) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.secondaryRow,
-              children: [secondaryText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.secondaryText,
-                numberOfLines: 1,
-                testID: secondaryTestID,
-                children: secondaryText
-              }) : null, secondaryAccessory]
-            }) : null]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.rightSection,
-            children: [(customBadge || badgeText !== undefined || !isExpanded && bottomRightText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.badgeContainer,
-              children: [customBadge ? customBadge : badgeText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.statusBadge, {
-                  color: badgeColor || statusDotColor
-                }],
-                children: badgeText
-              }) : null, !isExpanded && bottomRightText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.bottomRightText,
-                numberOfLines: 1,
-                children: bottomRightText
-              }) : null]
-            }), showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.chevronContainer,
-              children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-                size: 14,
-                color: _nightTheme.night.color.textTertiary
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
-                size: 14,
-                color: _nightTheme.night.color.textTertiary
-              })
-            })]
-          })]
-        })
+          })
+        }), trailingAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.trailingAction,
+          children: trailingAction
+        }) : null]
       }), isExpanded && expandedContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.expandedContent,
         children: expandedContent
@@ -189,6 +197,18 @@ const styles = _reactNative.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/commonjs/ui/components/DraggableHeader.js

@@ -40,6 +40,9 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
   },
   style,
   enabled = true,
+  claimOnMove = true,
+  onLayout,
+  hitSlop,
   maxOverflowX = 0,
   testID,
   accessibilityLabel
@@ -76,6 +79,7 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
     elementSize,
     minPosition,
     enabled,
+    claimOnMove,
     maxOverflowX
   });
   propsRef.current = {
@@ -88,6 +92,7 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
     elementSize,
     minPosition,
     enabled,
+    claimOnMove,
     maxOverflowX
   };
   const panResponder = (0, _react.useMemo)(() => {
@@ -99,7 +104,7 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
     };
     return _reactNative.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;
@@ -192,8 +197,18 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
   }, [position]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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/commonjs/ui/components/ExpandablePopover.js

@@ -32,7 +32,8 @@ function CollapsedPeek({
   height,
   customContent,
   label,
-  testID
+  testID,
+  attention
 }) {
   // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
   // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
@@ -52,17 +53,17 @@ function CollapsedPeek({
         scale
       }]
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onPress,
       activeOpacity: 0.8,
       style: [styles.peekButton, {
         width,
         height
       }],
-      accessibilityLabel: label || `Expand options`,
+      accessibilityLabel: attention?.label ? `${label || "Expand options"} — ${attention.label}` : label || `Expand options`,
       accessibilityRole: "button",
       testID: testID,
-      children: customContent || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [customContent || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
           size: 12,
           color: _gameUIColors.buoyColors.textMuted,
@@ -71,7 +72,17 @@ function CollapsedPeek({
           style: styles.peekCount,
           children: count
         })]
-      })
+      }), attention ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-attention` : undefined,
+        style: [styles.peekAttention, {
+          backgroundColor: attention.color
+        }],
+        children: attention.glyph ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.peekAttentionGlyph,
+          children: attention.glyph
+        }) : null
+      }) : null]
     })
   });
 }
@@ -141,6 +152,7 @@ function ExpandablePopover({
   defaultExpanded = false,
   collapsedContent,
   collapsedLabel,
+  attention = null,
   expandedStyle,
   persistState = false,
   storageKey,
@@ -270,7 +282,8 @@ function ExpandablePopover({
         height: peekHeight,
         customContent: collapsedContent,
         label: collapsedLabel,
-        testID: testID
+        testID: testID,
+        attention: attention
       })
     })]
   });
@@ -281,6 +294,25 @@ function ExpandablePopover({
 // ============================================================================
 
 const styles = _reactNative.StyleSheet.create({
+  peekAttention: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    minWidth: 11,
+    height: 11,
+    borderRadius: 6,
+    paddingHorizontal: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5,
+    borderColor: "#0C0C0C"
+  },
+  peekAttentionGlyph: {
+    color: "#000",
+    fontSize: 8,
+    fontWeight: "800",
+    lineHeight: 9
+  },
   container: {
     overflow: "visible",
     zIndex: 1000

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

@@ -7,25 +7,28 @@ exports.HeaderSearchButton = HeaderSearchButton;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _index2 = require("../gameUI/index.js");
+var _nightTheme = require("../night/nightTheme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function HeaderSearchButton({
   onPress,
   size = 14,
-  color = _index2.gameUIColors.secondary,
+  color,
   style,
   accessibilityLabel = "Search",
-  testID
+  testID,
+  variant = "plain"
 }) {
+  const chip = variant === "chip";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index.Search, {
       size: size,
-      color: color
+      color: color ?? (chip ? _nightTheme.night.color.textSecondary : _index2.gameUIColors.secondary)
     })
   });
 }
@@ -33,5 +36,15 @@ const styles = _reactNative.StyleSheet.create({
   button: {
     padding: 8,
     borderRadius: 4
+  },
+  chip: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _nightTheme.night.color.buttonSurface,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    alignItems: "center",
+    justifyContent: "center"
   }
 });