@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,133 +1 @@
-"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
-      })
-    })
-  });
-});
+"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%"};const DEFAULT_FOCUS={x:.54,y:.46};const Wormhole=exports.Wormhole=(0,_react.memo)(function R({width:d,height:h,animated:p,focus:n=DEFAULT_FOCUS}){const s=(0,_reactNative.useWindowDimensions)();const[m,a]=(0,_react.useState)(true);(0,_react.useEffect)(()=>{let t=true;let i=false;const O=_reactNative.AccessibilityInfo.addEventListener("reduceMotionChanged",r=>{i=true;a(r)});void _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(r=>{if(t&&!i)a(r)}).catch(()=>{});return()=>{t=false;O.remove()}},[]);const u=p&&!m;const o=(0,_primitives.useLoop)(_motion.WORMHOLE_CYCLE_MS,u);const e=Math.ceil(Math.hypot(s.width,s.height)*1.08);const l={position:"absolute",left:d*n.x-e/2,top:h*n.y-e/2,width:e,height:e};const c={transform:[{rotate:o.interpolate({inputRange:_motion.WORMHOLE_INPUT,outputRange:_motion.WORMHOLE_CAMERA_ROTATION})}]};return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[_absoluteFill.absoluteFill,{overflow:"hidden",backgroundColor:"#030a1c"}],children:u?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[l,c],children:[_motion.WORMHOLE_SHELLS.map((t,i)=>(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[_absoluteFill.absoluteFill,{opacity:o.interpolate({inputRange:_motion.WORMHOLE_INPUT,outputRange:t.opacity}),transform:[{scale:o.interpolate({inputRange:_motion.WORMHOLE_INPUT,outputRange:t.scale})},{rotate:o.interpolate({inputRange:_motion.WORMHOLE_INPUT,outputRange:t.rotate})}]}],children:(0,_jsxRuntime.jsx)(_reactNative.Image,{testID:"buoy-internal-background",source:_textures.WORMHOLE_SHEET,resizeMode:"stretch",fadeDuration:0,style:fill})},i)),(0,_jsxRuntime.jsx)(_reactNative.Image,{testID:"buoy-internal-background",source:_textures.WORMHOLE_CORE,resizeMode:"stretch",fadeDuration:0,style:{position:"absolute",left:e/4,top:e/4,width:e/2,height:e/2}})]}):(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[l,c],children:(0,_jsxRuntime.jsx)(_reactNative.Image,{testID:"buoy-internal-background",source:_textures.WORMHOLE_STILL,resizeMode:"stretch",fadeDuration:0,style:fill})})})});

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

@@ -1,47 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BackButton = BackButton;
-var _reactNative = require("react-native");
-var _index = require("../../icons/index.js");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function BackButton({
-  onPress,
-  color = _gameUIColors.gameUIColors.primary,
-  size = 16,
-  accessibilityLabel = "Go back",
-  accessibilityHint = "Return to previous screen"
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    "sentry-label": "ignore back button",
-    onPress: onPress,
-    style: styles.button,
-    hitSlop: {
-      top: 6,
-      bottom: 6,
-      left: 6,
-      right: 6
-    },
-    accessibilityLabel: accessibilityLabel,
-    accessibilityHint: accessibilityHint,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
-      color: color,
-      size: size
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  button: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    backgroundColor: _gameUIColors.gameUIColors.secondary + "1A",
-    justifyContent: "center",
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: _gameUIColors.gameUIColors.secondary + "33"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BackButton=BackButton;var _reactNative=require("react-native");var _index=require("../../icons/index.js");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _jsxRuntime=require("react/jsx-runtime");function BackButton({onPress:e,color:r=_gameUIColors.gameUIColors.primary,size:t=16,accessibilityLabel:o="Go back",accessibilityHint:s="Return to previous screen"}){return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{"sentry-label":"ignore back button",onPress:e,style:styles.button,hitSlop:{top:6,bottom:6,left:6,right:6},accessibilityLabel:o,accessibilityHint:s,children:(0,_jsxRuntime.jsx)(_index.ChevronLeft,{color:r,size:t})})}const styles=_reactNative.StyleSheet.create({button:{width:28,height:28,borderRadius:6,backgroundColor:_gameUIColors.gameUIColors.secondary+"1A",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:_gameUIColors.gameUIColors.secondary+"33"}});

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

@@ -1,226 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Badge = Badge;
-exports.CountBadge = CountBadge;
-exports.MethodBadge = MethodBadge;
-exports.StatusBadge = StatusBadge;
-exports.TypeBadge = TypeBadge;
-var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _nightTheme = require("../night/nightTheme.js");
-var _jsxRuntime = require("react/jsx-runtime");
-// Badge variants
-
-// Color mapping for common statuses - using Buoy theme colors
-const STATUS_COLORS = {
-  success: _gameUIColors.buoyColors.success,
-  error: _gameUIColors.buoyColors.error,
-  warning: _gameUIColors.buoyColors.warning,
-  info: _gameUIColors.buoyColors.primary,
-  pending: _nightTheme.night.color.textSecondary,
-  active: _gameUIColors.buoyColors.success,
-  inactive: _nightTheme.night.color.textTertiary,
-  stale: _gameUIColors.buoyColors.warning,
-  fetching: _gameUIColors.buoyColors.primary
-};
-
-// Color mapping for HTTP methods - using Buoy theme colors
-const METHOD_COLORS = {
-  GET: _gameUIColors.buoyColors.success,
-  POST: _gameUIColors.buoyColors.primary,
-  PUT: _gameUIColors.buoyColors.warning,
-  PATCH: _nightTheme.night.color.textSecondary,
-  DELETE: _gameUIColors.buoyColors.error,
-  HEAD: _nightTheme.night.color.textTertiary,
-  OPTIONS: _gameUIColors.buoyColors.primary
-};
-
-// Base Badge component
-
-function Badge({
-  children,
-  variant = "default",
-  color = "#E5E7EB",
-  size = "medium",
-  style
-}) {
-  const badgeStyles = getBadgeStyles(variant, color, size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [badgeStyles.container, style],
-    children: children
-  });
-}
-
-// Status Badge for success/error/warning states
-
-function StatusBadge({
-  status,
-  size = "medium",
-  style
-}) {
-  const color = STATUS_COLORS[status.toLowerCase()] || "#6B7280";
-  const badgeStyles = getBadgeStyles("status", color, size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [badgeStyles.container, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.statusDot, {
-        backgroundColor: color
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [badgeStyles.text, {
-        color
-      }],
-      children: status.charAt(0).toUpperCase() + status.slice(1)
-    })]
-  });
-}
-
-// Count Badge for displaying numbers
-
-function CountBadge({
-  count,
-  color = _gameUIColors.buoyColors.primary,
-  size = "small",
-  style,
-  maxCount = 99
-}) {
-  const displayCount = typeof count === "number" && count > maxCount ? `${maxCount}+` : count;
-  const badgeStyles = getBadgeStyles("count", color, size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [badgeStyles.container, styles.countBadge, style],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [badgeStyles.text, {
-        color
-      }],
-      children: displayCount
-    })
-  });
-}
-
-// Type Badge for data types
-
-function TypeBadge({
-  type,
-  color,
-  size = "small",
-  style,
-  testID
-}) {
-  const typeColor = color || getTypeColor(type);
-  const badgeStyles = getBadgeStyles("type", typeColor, size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [badgeStyles.container, style],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [badgeStyles.text, {
-        color: typeColor
-      }],
-      testID: testID,
-      children: type
-    })
-  });
-}
-
-// Method Badge for HTTP methods
-
-function MethodBadge({
-  method,
-  size = "medium",
-  style
-}) {
-  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
-  const badgeStyles = getBadgeStyles("method", color, size);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [badgeStyles.container, styles.methodBadge, style],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [badgeStyles.text, styles.methodText, {
-        color
-      }],
-      children: method.toUpperCase()
-    })
-  });
-}
-
-// Helper function to get badge styles
-function getBadgeStyles(variant, color, size) {
-  const isOutline = variant === "outline";
-  const backgroundColor = isOutline ? "transparent" : `${color}15`;
-  const borderColor = `${color}40`;
-  const sizeStyles = {
-    small: {
-      paddingHorizontal: 6,
-      paddingVertical: 2,
-      fontSize: 11
-    },
-    medium: {
-      paddingHorizontal: 8,
-      paddingVertical: 3,
-      fontSize: 12
-    },
-    large: {
-      paddingHorizontal: 10,
-      paddingVertical: 4,
-      fontSize: 14
-    }
-  };
-  const {
-    paddingHorizontal,
-    paddingVertical,
-    fontSize
-  } = sizeStyles[size];
-  return _reactNative.StyleSheet.create({
-    container: {
-      flexDirection: "row",
-      alignItems: "center",
-      backgroundColor,
-      borderColor,
-      borderWidth: 1,
-      borderRadius: variant === "count" ? 12 : 4,
-      paddingHorizontal,
-      paddingVertical
-    },
-    text: {
-      fontSize,
-      fontWeight: "600"
-    }
-  });
-}
-
-// Helper function to get type color - using Buoy theme
-function getTypeColor(type) {
-  const typeColors = {
-    string: _gameUIColors.buoyColors.primary,
-    number: _gameUIColors.buoyColors.primary,
-    boolean: _gameUIColors.buoyColors.primary,
-    object: _nightTheme.night.color.textSecondary,
-    array: _nightTheme.night.color.textSecondary,
-    null: _nightTheme.night.color.textTertiary,
-    undefined: _nightTheme.night.color.textTertiary,
-    function: _nightTheme.night.color.textSecondary
-  };
-  return typeColors[type.toLowerCase()] || _nightTheme.night.color.textTertiary;
-}
-const styles = _reactNative.StyleSheet.create({
-  statusDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    marginRight: 4
-  },
-  countBadge: {
-    minWidth: 20,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  methodBadge: {
-    // Fixed width keeps the URL column aligned down the list whether or not
-    // the badge still has a chip around it.
-    minWidth: 45,
-    alignItems: "center"
-  },
-  methodText: {
-    fontWeight: "700"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Badge=Badge;exports.CountBadge=CountBadge;exports.MethodBadge=MethodBadge;exports.StatusBadge=StatusBadge;exports.TypeBadge=TypeBadge;var _reactNative=require("react-native");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _nightTheme=require("../night/nightTheme.js");var _jsxRuntime=require("react/jsx-runtime");const STATUS_COLORS={success:_gameUIColors.buoyColors.success,error:_gameUIColors.buoyColors.error,warning:_gameUIColors.buoyColors.warning,info:_gameUIColors.buoyColors.primary,pending:_nightTheme.night.color.textSecondary,active:_gameUIColors.buoyColors.success,inactive:_nightTheme.night.color.textTertiary,stale:_gameUIColors.buoyColors.warning,fetching:_gameUIColors.buoyColors.primary};const METHOD_COLORS={GET:_gameUIColors.buoyColors.success,POST:_gameUIColors.buoyColors.primary,PUT:_gameUIColors.buoyColors.warning,PATCH:_nightTheme.night.color.textSecondary,DELETE:_gameUIColors.buoyColors.error,HEAD:_nightTheme.night.color.textTertiary,OPTIONS:_gameUIColors.buoyColors.primary};function Badge({children:e,variant:t="default",color:n="#E5E7EB",size:o="medium",style:r}){const i=getBadgeStyles(t,n,o);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[i.container,r],children:e})}function StatusBadge({status:e,size:t="medium",style:n}){const o=STATUS_COLORS[e.toLowerCase()]||"#6B7280";const r=getBadgeStyles("status",o,t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[r.container,n],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.statusDot,{backgroundColor:o}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[r.text,{color:o}],children:e.charAt(0).toUpperCase()+e.slice(1)})]})}function CountBadge({count:e,color:t=_gameUIColors.buoyColors.primary,size:n="small",style:o,maxCount:r=99}){const i=typeof e==="number"&&e>r?`${r}+`:e;const s=getBadgeStyles("count",t,n);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[s.container,styles.countBadge,o],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[s.text,{color:t}],children:i})})}function TypeBadge({type:e,color:t,size:n="small",style:o,testID:r}){const i=t||getTypeColor(e);const s=getBadgeStyles("type",i,n);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[s.container,o],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[s.text,{color:i}],testID:r,children:e})})}function MethodBadge({method:e,size:t="medium",style:n}){const o=METHOD_COLORS[e.toUpperCase()]||"#6B7280";const r=getBadgeStyles("method",o,t);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[r.container,styles.methodBadge,n],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[r.text,styles.methodText,{color:o}],children:e.toUpperCase()})})}function getBadgeStyles(e,t,n){const o=e==="outline";const r=o?"transparent":`${t}15`;const i=`${t}40`;const s={small:{paddingHorizontal:6,paddingVertical:2,fontSize:11},medium:{paddingHorizontal:8,paddingVertical:3,fontSize:12},large:{paddingHorizontal:10,paddingVertical:4,fontSize:14}};const{paddingHorizontal:a,paddingVertical:l,fontSize:c}=s[n];return _reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center",backgroundColor:r,borderColor:i,borderWidth:1,borderRadius:e==="count"?12:4,paddingHorizontal:a,paddingVertical:l},text:{fontSize:c,fontWeight:"600"}})}function getTypeColor(e){const t={string:_gameUIColors.buoyColors.primary,number:_gameUIColors.buoyColors.primary,boolean:_gameUIColors.buoyColors.primary,object:_nightTheme.night.color.textSecondary,array:_nightTheme.night.color.textSecondary,null:_nightTheme.night.color.textTertiary,undefined:_nightTheme.night.color.textTertiary,function:_nightTheme.night.color.textSecondary};return t[e.toLowerCase()]||_nightTheme.night.color.textTertiary}const styles=_reactNative.StyleSheet.create({statusDot:{width:6,height:6,borderRadius:3,marginRight:4},countBadge:{minWidth:20,justifyContent:"center",alignItems:"center"},methodBadge:{minWidth:45,alignItems:"center"},methodText:{fontWeight:"700"}});

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

@@ -1,111 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChangeRow = ChangeRow;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
-var _CompactRow = require("./CompactRow.js");
-var _index = require("../../icons/index.js");
-var _RelativeTime = require("../../utils/time/RelativeTime.js");
-var _fonts = require("../fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * ChangeRow — one recorded change in a state tool's history list.
- *
- * redux, zustand and jotai each drew the same row on top of `CompactRow`:
- * a colored status word (the slice / store / atom), a sublabel ("1.2ms ·
- * 3 keys changed"), the primary line (changed keys or a value preview), a
- * relative timestamp, and a right-hand badge made of a mono verb (SET,
- * WRITE, ADDITEM) plus an icon — a lightning bolt when state actually
- * changed, a clock when the update was slow. The three copies differed
- * only in how they computed those strings. This component owns the drawing;
- * tools own the strings.
- *
- * testID convention (unchanged from the originals): `${testID}-badge`,
- * `${testID}-change`, `${testID}-slow`, `${testID}-status`,
- * `${testID}-sublabel`, `${testID}-keys`.
- */
-
-function ChangeRow({
-  statusColor,
-  statusLabel,
-  sublabel,
-  primaryText,
-  timestamp,
-  badgeText,
-  changed = false,
-  slow = false,
-  badgePrefix,
-  customBadge,
-  plainBadgeText,
-  onPress,
-  testID,
-  accessibilityLabel
-}) {
-  // Always a custom badge, even when there is no icon to hang off it. The
-  // alternative — letting CompactRow draw `badgeText` itself — leaves the one
-  // row whose badge matters most (a write that changed NOTHING) as the only
-  // row in the list with no handle on its badge.
-  const badge = customBadge ?? (badgeText !== undefined || badgePrefix || changed || slow ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.badgeContainer,
-    children: [badgePrefix, badgeText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.badgeText, {
-        color: statusColor
-      }],
-      testID: testID ? `${testID}-badge` : undefined,
-      children: badgeText
-    }) : null, slow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.iconBadge,
-      testID: testID ? `${testID}-slow` : undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Clock, {
-        size: 12,
-        color: _gameUIColors.buoyColors.error
-      })
-    }) : changed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.iconBadge,
-      testID: testID ? `${testID}-change` : undefined,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Zap, {
-        size: 12,
-        color: _gameUIColors.buoyColors.warning
-      })
-    }) : null]
-  }) : undefined);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompactRow.CompactRow, {
-    statusDotColor: statusColor,
-    statusLabel: statusLabel,
-    statusSublabel: sublabel,
-    primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelativeTime.RelativeTime, {
-      timestamp: timestamp
-    }),
-    customBadge: badge,
-    badgeText: badge ? undefined : plainBadgeText,
-    badgeColor: statusColor,
-    showChevron: true,
-    onPress: onPress,
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    primaryTestID: testID ? `${testID}-keys` : undefined,
-    accessibilityLabel: accessibilityLabel
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: _fonts.monoFont
-  },
-  iconBadge: {
-    paddingHorizontal: 4
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ChangeRow=ChangeRow;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _gameUIColors=require("../gameUI/constants/gameUIColors.js");var _CompactRow=require("./CompactRow.js");var _index=require("../../icons/index.js");var _RelativeTime=require("../../utils/time/RelativeTime.js");var _fonts=require("../fonts.js");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(r){return r&&r.__esModule?r:{default:r}}function ChangeRow({statusColor:r,statusLabel:s,sublabel:l,primaryText:u,timestamp:d,badgeText:n,changed:i=false,slow:a=false,badgePrefix:t,customBadge:c,plainBadgeText:f,onPress:m,testID:e,accessibilityLabel:g}){const o=c??(n!==void 0||t||i||a?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeContainer,children:[t,n!==void 0?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:r}],testID:e?`${e}-badge`:void 0,children:n}):null,a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconBadge,testID:e?`${e}-slow`:void 0,children:(0,_jsxRuntime.jsx)(_index.Clock,{size:12,color:_gameUIColors.buoyColors.error})}):i?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.iconBadge,testID:e?`${e}-change`:void 0,children:(0,_jsxRuntime.jsx)(_index.Zap,{size:12,color:_gameUIColors.buoyColors.warning})}):null]}):void 0);return(0,_jsxRuntime.jsx)(_CompactRow.CompactRow,{statusDotColor:r,statusLabel:s,statusSublabel:l,primaryText:u,bottomRightText:(0,_jsxRuntime.jsx)(_RelativeTime.RelativeTime,{timestamp:d}),customBadge:o,badgeText:o?void 0:f,badgeColor:r,showChevron:true,onPress:m,testID:e,statusTestID:e?`${e}-status`:void 0,statusSublabelTestID:e?`${e}-sublabel`:void 0,primaryTestID:e?`${e}-keys`:void 0,accessibilityLabel:g})}const styles=_reactNative.StyleSheet.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},badgeText:{fontSize:11,fontWeight:"600",fontFamily:_fonts.monoFont},iconBadge:{paddingHorizontal:4}});

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

@@ -1,94 +1 @@
-"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
-  }
-});
+"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");const TAP_SLOP_PX=5;const SCROLL_SETTLE_MS=300;function useChipTap(){const[t,r]=(0,_react.useState)(false);const n=(0,_react.useRef)(0);const o=(0,_react.useRef)(0);const l=(0,_react.useCallback)(e=>{n.current=e.nativeEvent.pageX;o.current=e.nativeEvent.pageY},[]);const c=(0,_react.useCallback)(e=>{if(!e)return true;const i=Math.abs(e.nativeEvent.pageX-n.current);const u=Math.abs(e.nativeEvent.pageY-o.current);return!(i>TAP_SLOP_PX||u>TAP_SLOP_PX||t)},[t]);const a=(0,_react.useCallback)(()=>{setTimeout(()=>r(false),SCROLL_SETTLE_MS)},[]);const s=(0,_react.useCallback)(()=>r(true),[]);return{scrollProps:{onScrollBeginDrag:s,onScrollEndDrag:a,onMomentumScrollBegin:s,onMomentumScrollEnd:a},onTouchStart:l,isTap:c}}function ChipStrip({children:t,scrollProps:r,sentryLabel:n,style:o,contentStyle:l}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.container,o],children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{"sentry-label":n,horizontal:true,showsHorizontalScrollIndicator:false,style:styles.scrollView,contentContainerStyle:[styles.scrollContent,l],...r,children:t})})}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}});