@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,132 +1 @@
-"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, {
-          testID: "buoy-internal-background",
-          source: WORMHOLE_SHEET,
-          resizeMode: "stretch",
-          fadeDuration: 0,
-          style: fill
-        })
-      }, i)), /*#__PURE__*/_jsx(Image, {
-        testID: "buoy-internal-background",
-        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, {
-        testID: "buoy-internal-background",
-        source: WORMHOLE_STILL,
-        resizeMode: "stretch",
-        fadeDuration: 0,
-        style: fill
-      })
-    })
-  });
-});
+"use strict";import{memo as b,useEffect as w,useState as _}from"react";import{AccessibilityInfo as f,Animated as a,Image as c,View as W,useWindowDimensions as H}from"react-native";import{absoluteFill as g}from"../../../utils/absoluteFill.js";import{useLoop as D}from"../primitives.js";import{WORMHOLE_STILL as I,WORMHOLE_SHEET as v,WORMHOLE_CORE as x}from"./wormhole/textures.js";import{WORMHOLE_CYCLE_MS as C,WORMHOLE_INPUT as r,WORMHOLE_SHELLS as S,WORMHOLE_CAMERA_ROTATION as A}from"./wormhole/motion.js";import{jsx as o,jsxs as T}from"react/jsx-runtime";const R={width:"100%",height:"100%"};const k={x:.54,y:.46};export const Wormhole=b(function j({width:E,height:O,animated:y,focus:u=k}){const l=H();const[M,d]=_(true);w(()=>{let t=true;let i=false;const L=f.addEventListener("reduceMotionChanged",s=>{i=true;d(s)});void f.isReduceMotionEnabled().then(s=>{if(t&&!i)d(s)}).catch(()=>{});return()=>{t=false;L.remove()}},[]);const p=y&&!M;const n=D(C,p);const e=Math.ceil(Math.hypot(l.width,l.height)*1.08);const m={position:"absolute",left:E*u.x-e/2,top:O*u.y-e/2,width:e,height:e};const h={transform:[{rotate:n.interpolate({inputRange:r,outputRange:A})}]};return o(W,{pointerEvents:"none",style:[g,{overflow:"hidden",backgroundColor:"#030a1c"}],children:p?T(a.View,{style:[m,h],children:[S.map((t,i)=>o(a.View,{style:[g,{opacity:n.interpolate({inputRange:r,outputRange:t.opacity}),transform:[{scale:n.interpolate({inputRange:r,outputRange:t.scale})},{rotate:n.interpolate({inputRange:r,outputRange:t.rotate})}]}],children:o(c,{testID:"buoy-internal-background",source:v,resizeMode:"stretch",fadeDuration:0,style:R})},i)),o(c,{testID:"buoy-internal-background",source:x,resizeMode:"stretch",fadeDuration:0,style:{position:"absolute",left:e/4,top:e/4,width:e/2,height:e/2}})]}):o(a.View,{style:[m,h],children:o(c,{testID:"buoy-internal-background",source:I,resizeMode:"stretch",fadeDuration:0,style:R})})})});

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

@@ -1,43 +1 @@
-"use strict";
-
-import { Pressable, StyleSheet } from "react-native";
-import { ChevronLeft } from "../../icons/index.js";
-import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function BackButton({
-  onPress,
-  color = gameUIColors.primary,
-  size = 16,
-  accessibilityLabel = "Go back",
-  accessibilityHint = "Return to previous screen"
-}) {
-  return /*#__PURE__*/_jsx(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__*/_jsx(ChevronLeft, {
-      color: color,
-      size: size
-    })
-  });
-}
-const styles = StyleSheet.create({
-  button: {
-    width: 28,
-    height: 28,
-    borderRadius: 6,
-    backgroundColor: gameUIColors.secondary + "1A",
-    justifyContent: "center",
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: gameUIColors.secondary + "33"
-  }
-});
+"use strict";import{Pressable as c,StyleSheet as a}from"react-native";import{ChevronLeft as l}from"../../icons/index.js";import{gameUIColors as t}from"../gameUI/constants/gameUIColors.js";import{jsx as e}from"react/jsx-runtime";export function BackButton({onPress:o,color:r=t.primary,size:s=16,accessibilityLabel:i="Go back",accessibilityHint:n="Return to previous screen"}){return e(c,{"sentry-label":"ignore back button",onPress:o,style:b.button,hitSlop:{top:6,bottom:6,left:6,right:6},accessibilityLabel:i,accessibilityHint:n,children:e(l,{color:r,size:s})})}const b=a.create({button:{width:28,height:28,borderRadius:6,backgroundColor:t.secondary+"1A",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:t.secondary+"33"}});

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

@@ -1,218 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { night } from "../night/nightTheme.js";
-
-// Badge variants
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Color mapping for common statuses - using Buoy theme colors
-const STATUS_COLORS = {
-  success: buoyColors.success,
-  error: buoyColors.error,
-  warning: buoyColors.warning,
-  info: buoyColors.primary,
-  pending: night.color.textSecondary,
-  active: buoyColors.success,
-  inactive: night.color.textTertiary,
-  stale: buoyColors.warning,
-  fetching: buoyColors.primary
-};
-
-// Color mapping for HTTP methods - using Buoy theme colors
-const METHOD_COLORS = {
-  GET: buoyColors.success,
-  POST: buoyColors.primary,
-  PUT: buoyColors.warning,
-  PATCH: night.color.textSecondary,
-  DELETE: buoyColors.error,
-  HEAD: night.color.textTertiary,
-  OPTIONS: buoyColors.primary
-};
-
-// Base Badge component
-
-export function Badge({
-  children,
-  variant = "default",
-  color = "#E5E7EB",
-  size = "medium",
-  style
-}) {
-  const badgeStyles = getBadgeStyles(variant, color, size);
-  return /*#__PURE__*/_jsx(View, {
-    style: [badgeStyles.container, style],
-    children: children
-  });
-}
-
-// Status Badge for success/error/warning states
-
-export function StatusBadge({
-  status,
-  size = "medium",
-  style
-}) {
-  const color = STATUS_COLORS[status.toLowerCase()] || "#6B7280";
-  const badgeStyles = getBadgeStyles("status", color, size);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [badgeStyles.container, style],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.statusDot, {
-        backgroundColor: color
-      }]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [badgeStyles.text, {
-        color
-      }],
-      children: status.charAt(0).toUpperCase() + status.slice(1)
-    })]
-  });
-}
-
-// Count Badge for displaying numbers
-
-export function CountBadge({
-  count,
-  color = buoyColors.primary,
-  size = "small",
-  style,
-  maxCount = 99
-}) {
-  const displayCount = typeof count === "number" && count > maxCount ? `${maxCount}+` : count;
-  const badgeStyles = getBadgeStyles("count", color, size);
-  return /*#__PURE__*/_jsx(View, {
-    style: [badgeStyles.container, styles.countBadge, style],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [badgeStyles.text, {
-        color
-      }],
-      children: displayCount
-    })
-  });
-}
-
-// Type Badge for data types
-
-export function TypeBadge({
-  type,
-  color,
-  size = "small",
-  style,
-  testID
-}) {
-  const typeColor = color || getTypeColor(type);
-  const badgeStyles = getBadgeStyles("type", typeColor, size);
-  return /*#__PURE__*/_jsx(View, {
-    style: [badgeStyles.container, style],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [badgeStyles.text, {
-        color: typeColor
-      }],
-      testID: testID,
-      children: type
-    })
-  });
-}
-
-// Method Badge for HTTP methods
-
-export function MethodBadge({
-  method,
-  size = "medium",
-  style
-}) {
-  const color = METHOD_COLORS[method.toUpperCase()] || "#6B7280";
-  const badgeStyles = getBadgeStyles("method", color, size);
-  return /*#__PURE__*/_jsx(View, {
-    style: [badgeStyles.container, styles.methodBadge, style],
-    children: /*#__PURE__*/_jsx(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 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: buoyColors.primary,
-    number: buoyColors.primary,
-    boolean: buoyColors.primary,
-    object: night.color.textSecondary,
-    array: night.color.textSecondary,
-    null: night.color.textTertiary,
-    undefined: night.color.textTertiary,
-    function: night.color.textSecondary
-  };
-  return typeColors[type.toLowerCase()] || night.color.textTertiary;
-}
-const styles = 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";import{View as d,Text as g,StyleSheet as p}from"react-native";import{buoyColors as e}from"../gameUI/constants/gameUIColors.js";import{night as a}from"../night/nightTheme.js";import{jsx as c,jsxs as f}from"react/jsx-runtime";const S={success:e.success,error:e.error,warning:e.warning,info:e.primary,pending:a.color.textSecondary,active:e.success,inactive:a.color.textTertiary,stale:e.warning,fetching:e.primary};const T={GET:e.success,POST:e.primary,PUT:e.warning,PATCH:a.color.textSecondary,DELETE:e.error,HEAD:a.color.textTertiary,OPTIONS:e.primary};export function Badge({children:t,variant:r="default",color:i="#E5E7EB",size:o="medium",style:n}){const s=y(r,i,o);return c(d,{style:[s.container,n],children:t})}export function StatusBadge({status:t,size:r="medium",style:i}){const o=S[t.toLowerCase()]||"#6B7280";const n=y("status",o,r);return f(d,{style:[n.container,i],children:[c(d,{style:[u.statusDot,{backgroundColor:o}]}),c(g,{style:[n.text,{color:o}],children:t.charAt(0).toUpperCase()+t.slice(1)})]})}export function CountBadge({count:t,color:r=e.primary,size:i="small",style:o,maxCount:n=99}){const s=typeof t==="number"&&t>n?`${n}+`:t;const l=y("count",r,i);return c(d,{style:[l.container,u.countBadge,o],children:c(g,{style:[l.text,{color:r}],children:s})})}export function TypeBadge({type:t,color:r,size:i="small",style:o,testID:n}){const s=r||C(t);const l=y("type",s,i);return c(d,{style:[l.container,o],children:c(g,{style:[l.text,{color:s}],testID:n,children:t})})}export function MethodBadge({method:t,size:r="medium",style:i}){const o=T[t.toUpperCase()]||"#6B7280";const n=y("method",o,r);return c(d,{style:[n.container,u.methodBadge,i],children:c(g,{style:[n.text,u.methodText,{color:o}],children:t.toUpperCase()})})}function y(t,r,i){const o=t==="outline";const n=o?"transparent":`${r}15`;const s=`${r}40`;const l={small:{paddingHorizontal:6,paddingVertical:2,fontSize:11},medium:{paddingHorizontal:8,paddingVertical:3,fontSize:12},large:{paddingHorizontal:10,paddingVertical:4,fontSize:14}};const{paddingHorizontal:m,paddingVertical:h,fontSize:x}=l[i];return p.create({container:{flexDirection:"row",alignItems:"center",backgroundColor:n,borderColor:s,borderWidth:1,borderRadius:t==="count"?12:4,paddingHorizontal:m,paddingVertical:h},text:{fontSize:x,fontWeight:"600"}})}function C(t){const r={string:e.primary,number:e.primary,boolean:e.primary,object:a.color.textSecondary,array:a.color.textSecondary,null:a.color.textTertiary,undefined:a.color.textTertiary,function:a.color.textSecondary};return r[t.toLowerCase()]||a.color.textTertiary}const u=p.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/module/ui/components/ChangeRow.js

@@ -1,106 +1 @@
-"use strict";
-
-/**
- * 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`.
- */
-
-import React from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { CompactRow } from "./CompactRow.js";
-import { Clock, Zap } from "../../icons/index.js";
-import { RelativeTime } from "../../utils/time/RelativeTime.js";
-import { monoFont } from "../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export 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__*/_jsxs(View, {
-    style: styles.badgeContainer,
-    children: [badgePrefix, badgeText !== undefined ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.badgeText, {
-        color: statusColor
-      }],
-      testID: testID ? `${testID}-badge` : undefined,
-      children: badgeText
-    }) : null, slow ? /*#__PURE__*/_jsx(View, {
-      style: styles.iconBadge,
-      testID: testID ? `${testID}-slow` : undefined,
-      children: /*#__PURE__*/_jsx(Clock, {
-        size: 12,
-        color: buoyColors.error
-      })
-    }) : changed ? /*#__PURE__*/_jsx(View, {
-      style: styles.iconBadge,
-      testID: testID ? `${testID}-change` : undefined,
-      children: /*#__PURE__*/_jsx(Zap, {
-        size: 12,
-        color: buoyColors.warning
-      })
-    }) : null]
-  }) : undefined);
-  return /*#__PURE__*/_jsx(CompactRow, {
-    statusDotColor: statusColor,
-    statusLabel: statusLabel,
-    statusSublabel: sublabel,
-    primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/_jsx(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 = StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  iconBadge: {
-    paddingHorizontal: 4
-  }
-});
+"use strict";import B from"react";import{StyleSheet as x,Text as T,View as t}from"react-native";import{buoyColors as m}from"../gameUI/constants/gameUIColors.js";import{CompactRow as C}from"./CompactRow.js";import{Clock as w,Zap as $}from"../../icons/index.js";import{RelativeTime as R}from"../../utils/time/RelativeTime.js";import{monoFont as S}from"../fonts.js";import{jsx as o,jsxs as j}from"react/jsx-runtime";export function ChangeRow({statusColor:i,statusLabel:u,sublabel:f,primaryText:c,timestamp:b,badgeText:r,changed:a=false,slow:s=false,badgePrefix:l,customBadge:g,plainBadgeText:p,onPress:y,testID:e,accessibilityLabel:h}){const d=g??(r!==void 0||l||a||s?j(t,{style:n.badgeContainer,children:[l,r!==void 0?o(T,{style:[n.badgeText,{color:i}],testID:e?`${e}-badge`:void 0,children:r}):null,s?o(t,{style:n.iconBadge,testID:e?`${e}-slow`:void 0,children:o(w,{size:12,color:m.error})}):a?o(t,{style:n.iconBadge,testID:e?`${e}-change`:void 0,children:o($,{size:12,color:m.warning})}):null]}):void 0);return o(C,{statusDotColor:i,statusLabel:u,statusSublabel:f,primaryText:c,bottomRightText:o(R,{timestamp:b}),customBadge:d,badgeText:d?void 0:p,badgeColor:i,showChevron:true,onPress:y,testID:e,statusTestID:e?`${e}-status`:void 0,statusSublabelTestID:e?`${e}-sublabel`:void 0,primaryTestID:e?`${e}-keys`:void 0,accessibilityLabel:h})}const n=x.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},badgeText:{fontSize:11,fontWeight:"600",fontFamily:S},iconBadge:{paddingHorizontal:4}});

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

@@ -1,91 +1 @@
-"use strict";
-
-/**
- * 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`.
- */
-
-import { useCallback, useRef, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-
-/** How far a touch may travel and still count as a tap. */
-import { jsx as _jsx } from "react/jsx-runtime";
-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.
- */
-export function useChipTap() {
-  const [isScrolling, setIsScrolling] = useState(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
-  const onTouchStart = useCallback(event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  }, []);
-  const isTap = 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 = useCallback(() => {
-    setTimeout(() => setIsScrolling(false), SCROLL_SETTLE_MS);
-  }, []);
-  const begin = useCallback(() => setIsScrolling(true), []);
-  return {
-    scrollProps: {
-      onScrollBeginDrag: begin,
-      onScrollEndDrag: settle,
-      onMomentumScrollBegin: begin,
-      onMomentumScrollEnd: settle
-    },
-    onTouchStart,
-    isTap
-  };
-}
-export function ChipStrip({
-  children,
-  scrollProps,
-  sentryLabel,
-  style,
-  contentStyle
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, style],
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      "sentry-label": sentryLabel,
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      style: styles.scrollView,
-      contentContainerStyle: [styles.scrollContent, contentStyle],
-      ...scrollProps,
-      children: children
-    })
-  });
-}
-const styles = 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";import{useCallback as l,useRef as u,useState as m}from"react";import{ScrollView as d,StyleSheet as x,View as E}from"react-native";import{jsx as S}from"react/jsx-runtime";const p=5;const w=300;export function useChipTap(){const[e,n]=m(false);const o=u(0);const r=u(0);const c=l(t=>{o.current=t.nativeEvent.pageX;r.current=t.nativeEvent.pageY},[]);const g=l(t=>{if(!t)return true;const f=Math.abs(t.nativeEvent.pageX-o.current);const h=Math.abs(t.nativeEvent.pageY-r.current);return!(f>p||h>p||e)},[e]);const i=l(()=>{setTimeout(()=>n(false),w)},[]);const a=l(()=>n(true),[]);return{scrollProps:{onScrollBeginDrag:a,onScrollEndDrag:i,onMomentumScrollBegin:a,onMomentumScrollEnd:i},onTouchStart:c,isTap:g}}export function ChipStrip({children:e,scrollProps:n,sentryLabel:o,style:r,contentStyle:c}){return S(E,{style:[s.container,r],children:S(d,{"sentry-label":o,horizontal:true,showsHorizontalScrollIndicator:false,style:s.scrollView,contentContainerStyle:[s.scrollContent,c],...n,children:e})})}const s=x.create({container:{flex:1,minWidth:0},scrollView:{flex:1},scrollContent:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:4,paddingVertical:4,flexGrow:1}});