@buoy-gg/shared-ui 7.0.33 → 7.0.35

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipStrip = ChipStrip;
+exports.useChipTap = useChipTap;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ChipStrip — a horizontally scrolling row of filter chips whose taps
+ * don't misfire while the strip is being panned.
+ *
+ * react-query drew this three times (query status, mutation status, storage
+ * type) with the same 5-point / 300 ms swipe-vs-tap discrimination. The
+ * strip and the discrimination live here; the chip is whatever the tool
+ * renders, wired through `useChipTap`.
+ */
+
+/** How far a touch may travel and still count as a tap. */const TAP_SLOP_PX = 5;
+/** How long after a scroll ends taps stay suppressed. */
+const SCROLL_SETTLE_MS = 300;
+/**
+ * Swipe-vs-tap discrimination for chips inside a horizontal ScrollView.
+ * A press that moved more than a few points, or landed while the strip was
+ * still scrolling, is a pan — not a filter toggle.
+ */
+function useChipTap() {
+  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
+  const touchStartX = (0, _react.useRef)(0);
+  const touchStartY = (0, _react.useRef)(0);
+  const onTouchStart = (0, _react.useCallback)(event => {
+    touchStartX.current = event.nativeEvent.pageX;
+    touchStartY.current = event.nativeEvent.pageY;
+  }, []);
+  const isTap = (0, _react.useCallback)(event => {
+    if (!event) return true;
+    const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
+    const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
+    return !(dx > TAP_SLOP_PX || dy > TAP_SLOP_PX || isScrolling);
+  }, [isScrolling]);
+  const settle = (0, _react.useCallback)(() => {
+    setTimeout(() => setIsScrolling(false), SCROLL_SETTLE_MS);
+  }, []);
+  const begin = (0, _react.useCallback)(() => setIsScrolling(true), []);
+  return {
+    scrollProps: {
+      onScrollBeginDrag: begin,
+      onScrollEndDrag: settle,
+      onMomentumScrollBegin: begin,
+      onMomentumScrollEnd: settle
+    },
+    onTouchStart,
+    isTap
+  };
+}
+function ChipStrip({
+  children,
+  scrollProps,
+  sentryLabel,
+  style,
+  contentStyle
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.container, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      "sentry-label": sentryLabel,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      style: styles.scrollView,
+      contentContainerStyle: [styles.scrollContent, contentStyle],
+      ...scrollProps,
+      children: children
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    minWidth: 0
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    flexGrow: 1
+  }
+});

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 _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ClipboardHintBanner - A hint banner that shows users how to fix iOS Simulator clipboard sync
@@ -129,7 +130,7 @@ const styles = _reactNative.StyleSheet.create({
     textAlign: "center"
   },
   menuPath: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 12,
     color: _index.gameUIColors.primary,
     fontWeight: "600"

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

@@ -7,6 +7,7 @@ exports.CompactRow = CompactRow;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function CompactRow({
   statusDotColor,
@@ -225,7 +226,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12
   },
   queryHash: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 12,
     color: _nightTheme.night.color.text,
     lineHeight: 16
@@ -269,6 +270,6 @@ const styles = _reactNative.StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   }
 });

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

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _index2 = require("../gameUI/index.js");
 var _CopyButton = require("./CopyButton.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DataInspector({
   data,
@@ -268,14 +269,14 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 300
   },
   codeText: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 11,
     color: _index2.gameUIColors.text,
     padding: 12,
     lineHeight: 16
   },
   editor: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 11,
     color: _index2.gameUIColors.text,
     padding: 12,

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

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../gameUI/index.js");
 var _ModalHeader = require("./ModalHeader.js");
 var _CopyButton = require("./CopyButton.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DetailView({
   children,
@@ -297,7 +298,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   dataText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     color: _index.gameUIColors.text
   },
   statusBar: {

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DetailViewToggle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * DetailViewToggle — the row of view cards at the top of a detail screen
+ * (ACTION · STATE · DIFF, CHANGE · STATE · DIFF, …).
+ *
+ * redux, zustand and jotai each shipped their own copy, differing only in
+ * the view keys, labels and testID prefix. The cards, the accent chrome,
+ * the disabled state (diff with nothing to compare) and the a11y contract
+ * are all one component now; tools pass their `views`.
+ */
+
+function DetailViewToggleImpl({
+  views,
+  activeView,
+  onViewChange,
+  disabledKeys,
+  testIDPrefix
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: views.map(view => {
+      const isActive = activeView === view.key;
+      const isDisabled = disabledKeys?.includes(view.key) ?? false;
+      const activeColor = view.activeColor ?? _nightTheme.night.color.accent;
+      const IconComponent = view.icon;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.card, isActive && [styles.cardActive, {
+          borderColor: activeColor
+        }], isDisabled && styles.cardDisabled],
+        onPress: () => !isDisabled && onViewChange(view.key),
+        activeOpacity: isDisabled ? 1 : 0.8,
+        disabled: isDisabled,
+        testID: testIDPrefix ? `${testIDPrefix}-view-${view.key}` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: view.label,
+        accessibilityState: {
+          selected: isActive,
+          disabled: isDisabled
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.cardContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            size: 14,
+            color: isActive ? activeColor : isDisabled ? _nightTheme.night.color.textTertiary : _nightTheme.night.color.textSecondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
+              color: activeColor
+            }], isDisabled && styles.cardLabelDisabled],
+            children: view.label
+          })]
+        }), view.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
+          children: view.description
+        }) : null]
+      }, view.key);
+    })
+  });
+}
+const DetailViewToggle = exports.DetailViewToggle = /*#__PURE__*/(0, _react.memo)(DetailViewToggleImpl);
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 14,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
+  },
+  card: {
+    flex: 1,
+    backgroundColor: _nightTheme.night.color.surface,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    padding: 10,
+    gap: 4
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    backgroundColor: _nightTheme.night.color.accentSoft,
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  cardDisabled: {
+    opacity: 0.5
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  cardLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: _nightTheme.night.color.textSecondary
+  },
+  cardLabelActive: {
+    color: _nightTheme.night.color.text
+  },
+  cardLabelDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  },
+  cardDescription: {
+    fontSize: 9,
+    color: _nightTheme.night.color.textTertiary,
+    lineHeight: 12
+  },
+  cardDescriptionActive: {
+    color: _nightTheme.night.color.textSecondary
+  },
+  cardDescriptionDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  }
+});

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

@@ -49,7 +49,8 @@ function DevToolsCard({
   style,
   contentStyle,
   testID,
-  accessibilityLabel
+  accessibilityLabel,
+  accessible
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -58,6 +59,7 @@ function DevToolsCard({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessible: accessible,
       accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],

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

@@ -12,6 +12,7 @@ var _FilterComponents = require("./FilterComponents.js");
 var _useFilterManager = require("../../hooks/useFilterManager.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DynamicFilterView({
   sections = [],
@@ -493,7 +494,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: _nightTheme.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 3,
     marginBottom: 1,
     textShadowColor: "rgba(0, 0, 0, 0.2)",
@@ -507,7 +508,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "500",
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 3,
     marginBottom: 1
   },
@@ -551,7 +552,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 13,
     fontWeight: "700",
     letterSpacing: 0.3,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   activeFiltersSection: {
     backgroundColor: _nightTheme.night.color.surface,
@@ -690,7 +691,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     fontSize: 11,
     color: _nightTheme.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginRight: 8
   },
   howItWorksSection: {
@@ -709,7 +710,7 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 12,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -722,14 +723,14 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     lineHeight: 16
   },
   previewSection: {