@buoy-gg/react-query 7.0.41 → 7.0.43

package/lib/module/react-query/components/modals/SwipeIndicator.js

@@ -1,201 +1 @@
-"use strict";
-
-import { View, StyleSheet, Animated } from "react-native";
-import { absoluteFill } from "@buoy-gg/shared-ui";
-import { useMemo } from "react";
-import { ChevronLeft, ChevronRight, night } from "@buoy-gg/shared-ui";
-
-/**
- * Morphing swipe indicator – thin line ➜ pill ➜ circle with a pop-out cue at
- * full commit.  Visual-only; gesture logic lives upstream.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* -------------------------------------------------------------------------- */
-// VISUAL CONSTANTS – tuned for typical back-gesture UX
-/* -------------------------------------------------------------------------- */
-const INDICATOR_HEIGHT = 32; // ⬆️ bigger circle (line height)
-const MIN_WIDTH = 6; // hairline start
-const MAX_WIDTH = INDICATOR_HEIGHT; // circle when width == height
-const DEFAULT_MAX_TRANSLATION = 120;
-const POP_OUT_START = 0.95; // progress at which pop-out begins
-const POP_OUT_SCALE = 1.15; // final scale factor when fully committed
-
-export function SwipeIndicator({
-  translationX,
-  maxTranslation = DEFAULT_MAX_TRANSLATION,
-  canSwipeLeft = true,
-  canSwipeRight = true
-}) {
-  /* ---------------- LEFT EDGE (Back) ---------------- */
-  const leftProgress = useMemo(() => {
-    return translationX.interpolate({
-      inputRange: [0, maxTranslation],
-      outputRange: [0, 1],
-      extrapolate: "clamp"
-    });
-  }, [translationX, maxTranslation]);
-  const leftIndicatorWidth = useMemo(() => {
-    return leftProgress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [MIN_WIDTH, MAX_WIDTH]
-    });
-  }, [leftProgress]);
-  const leftIndicatorScale = useMemo(() => {
-    return leftProgress.interpolate({
-      inputRange: [0, POP_OUT_START, 1],
-      outputRange: [1, 1, POP_OUT_SCALE]
-    });
-  }, [leftProgress]);
-  const leftIndicatorTranslateX = useMemo(() => {
-    return leftProgress.interpolate({
-      inputRange: [0, 0.99, 1],
-      outputRange: [0, 0, 16]
-    });
-  }, [leftProgress]);
-  const leftIndicatorOpacity = useMemo(() => {
-    return leftProgress.interpolate({
-      inputRange: [0, 0.01],
-      outputRange: [0, 1],
-      extrapolate: "clamp"
-    });
-  }, [leftProgress]);
-  const leftArrowOpacity = useMemo(() => {
-    return leftProgress.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [0, 0, 1],
-      extrapolate: "clamp"
-    });
-  }, [leftProgress]);
-  const leftArrowScale = useMemo(() => {
-    return leftProgress.interpolate({
-      inputRange: [0, 0.5, POP_OUT_START, 1],
-      outputRange: [0.8, 0.8, 1, 1.2]
-    });
-  }, [leftProgress]);
-
-  /* ---------------- RIGHT EDGE ---------------- */
-  const rightProgress = useMemo(() => {
-    return translationX.interpolate({
-      inputRange: [-maxTranslation, 0],
-      outputRange: [1, 0],
-      extrapolate: "clamp"
-    });
-  }, [translationX, maxTranslation]);
-  const rightIndicatorWidth = useMemo(() => {
-    return rightProgress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [MIN_WIDTH, MAX_WIDTH]
-    });
-  }, [rightProgress]);
-  const rightIndicatorScale = useMemo(() => {
-    return rightProgress.interpolate({
-      inputRange: [0, POP_OUT_START, 1],
-      outputRange: [1, 1, POP_OUT_SCALE]
-    });
-  }, [rightProgress]);
-  const rightIndicatorTranslateX = useMemo(() => {
-    return rightProgress.interpolate({
-      inputRange: [0, 0.99, 1],
-      outputRange: [0, 0, -16]
-    });
-  }, [rightProgress]);
-  const rightIndicatorOpacity = useMemo(() => {
-    return rightProgress.interpolate({
-      inputRange: [0, 0.01],
-      outputRange: [0, 1],
-      extrapolate: "clamp"
-    });
-  }, [rightProgress]);
-  const rightArrowOpacity = useMemo(() => {
-    return rightProgress.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [0, 0, 1],
-      extrapolate: "clamp"
-    });
-  }, [rightProgress]);
-  const rightArrowScale = useMemo(() => {
-    return rightProgress.interpolate({
-      inputRange: [0, 0.5, POP_OUT_START, 1],
-      outputRange: [0.8, 0.8, 1, 1.2]
-    });
-  }, [rightProgress]);
-
-  /* ---------------- Render ---------------- */
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    pointerEvents: "none",
-    children: [canSwipeRight && /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.leftWrapper, {
-        width: leftIndicatorWidth,
-        height: INDICATOR_HEIGHT,
-        borderRadius: INDICATOR_HEIGHT / 2,
-        backgroundColor: night.color.text + "E6",
-        justifyContent: "center",
-        alignItems: "center",
-        opacity: leftIndicatorOpacity,
-        transform: [{
-          scale: leftIndicatorScale
-        }, {
-          translateX: leftIndicatorTranslateX
-        }]
-      }],
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          opacity: leftArrowOpacity,
-          transform: [{
-            scale: leftArrowScale
-          }]
-        },
-        children: /*#__PURE__*/_jsx(ChevronLeft, {
-          size: INDICATOR_HEIGHT * 0.6,
-          color: night.color.accent,
-          strokeWidth: 3
-        })
-      })
-    }), canSwipeLeft && /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.rightWrapper, {
-        width: rightIndicatorWidth,
-        height: INDICATOR_HEIGHT,
-        borderRadius: INDICATOR_HEIGHT / 2,
-        backgroundColor: night.color.text + "E6",
-        justifyContent: "center",
-        alignItems: "center",
-        opacity: rightIndicatorOpacity,
-        transform: [{
-          scale: rightIndicatorScale
-        }, {
-          translateX: rightIndicatorTranslateX
-        }]
-      }],
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          opacity: rightArrowOpacity,
-          transform: [{
-            scale: rightArrowScale
-          }]
-        },
-        children: /*#__PURE__*/_jsx(ChevronRight, {
-          size: INDICATOR_HEIGHT * 0.6,
-          color: night.color.accent,
-          strokeWidth: 3
-        })
-      })
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    ...absoluteFill,
-    zIndex: 1000,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  leftWrapper: {
-    position: "absolute",
-    left: 16
-  },
-  rightWrapper: {
-    position: "absolute",
-    right: 16
-  }
-});
+"use strict";import{View as C,StyleSheet as b,Animated as c}from"react-native";import{absoluteFill as j}from"@buoy-gg/shared-ui";import{useMemo as t}from"react";import{ChevronLeft as E,ChevronRight as P,night as p}from"@buoy-gg/shared-ui";import{jsx as o,jsxs as V}from"react/jsx-runtime";const n=32;const s=6;const g=n;const k=120;const u=.95;const R=1.15;export function SwipeIndicator({translationX:a,maxTranslation:i=k,canSwipeLeft:h=true,canSwipeRight:d=true}){const e=t(()=>{return a.interpolate({inputRange:[0,i],outputRange:[0,1],extrapolate:"clamp"})},[a,i]);const f=t(()=>{return e.interpolate({inputRange:[0,1],outputRange:[s,g]})},[e]);const m=t(()=>{return e.interpolate({inputRange:[0,u,1],outputRange:[1,1,R]})},[e]);const I=t(()=>{return e.interpolate({inputRange:[0,.99,1],outputRange:[0,0,16]})},[e]);const y=t(()=>{return e.interpolate({inputRange:[0,.01],outputRange:[0,1],extrapolate:"clamp"})},[e]);const A=t(()=>{return e.interpolate({inputRange:[0,.5,1],outputRange:[0,0,1],extrapolate:"clamp"})},[e]);const w=t(()=>{return e.interpolate({inputRange:[0,.5,u,1],outputRange:[.8,.8,1,1.2]})},[e]);const r=t(()=>{return a.interpolate({inputRange:[-i,0],outputRange:[1,0],extrapolate:"clamp"})},[a,i]);const x=t(()=>{return r.interpolate({inputRange:[0,1],outputRange:[s,g]})},[r]);const _=t(()=>{return r.interpolate({inputRange:[0,u,1],outputRange:[1,1,R]})},[r]);const O=t(()=>{return r.interpolate({inputRange:[0,.99,1],outputRange:[0,0,-16]})},[r]);const S=t(()=>{return r.interpolate({inputRange:[0,.01],outputRange:[0,1],extrapolate:"clamp"})},[r]);const T=t(()=>{return r.interpolate({inputRange:[0,.5,1],outputRange:[0,0,1],extrapolate:"clamp"})},[r]);const W=t(()=>{return r.interpolate({inputRange:[0,.5,u,1],outputRange:[.8,.8,1,1.2]})},[r]);return V(C,{style:l.container,pointerEvents:"none",children:[d&&o(c.View,{style:[l.leftWrapper,{width:f,height:n,borderRadius:n/2,backgroundColor:p.color.text+"E6",justifyContent:"center",alignItems:"center",opacity:y,transform:[{scale:m},{translateX:I}]}],children:o(c.View,{style:{opacity:A,transform:[{scale:w}]},children:o(E,{size:n*.6,color:p.color.accent,strokeWidth:3})})}),h&&o(c.View,{style:[l.rightWrapper,{width:x,height:n,borderRadius:n/2,backgroundColor:p.color.text+"E6",justifyContent:"center",alignItems:"center",opacity:S,transform:[{scale:_},{translateX:O}]}],children:o(c.View,{style:{opacity:T,transform:[{scale:W}]},children:o(P,{size:n*.6,color:p.color.accent,strokeWidth:3})})})]})}const l=b.create({container:{...j,zIndex:1e3,justifyContent:"center",alignItems:"center"},leftWrapper:{position:"absolute",left:16},rightWrapper:{position:"absolute",right:16}});

package/lib/module/react-query/components/query-browser/ActionButton.js

@@ -1,96 +1 @@
-"use strict";
-
-import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Clean, minimal color config matching React Query DevTools style
-const buttonConfigs = {
-  refetch: {
-    dotColor: night.color.accent,
-    textColor: night.color.text,
-    borderColor: night.color.border
-  },
-  invalidate: {
-    dotColor: night.color.warning,
-    textColor: night.color.text,
-    borderColor: night.color.border
-  },
-  reset: {
-    dotColor: night.color.textSecondary,
-    textColor: night.color.text,
-    borderColor: night.color.border
-  },
-  remove: {
-    dotColor: night.color.danger,
-    textColor: night.color.danger,
-    borderColor: night.color.danger + "40"
-  },
-  triggerLoading: {
-    dotColor: night.color.info,
-    textColor: night.color.info,
-    borderColor: night.color.info + "40"
-  },
-  triggerError: {
-    dotColor: night.color.danger,
-    textColor: night.color.danger,
-    borderColor: night.color.danger + "40"
-  }
-};
-/** Clean, minimal action button matching React Query DevTools style. */
-export default function ActionButton({
-  onClick,
-  text,
-  variant,
-  disabled,
-  testID
-}) {
-  const config = buttonConfigs[variant];
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    "sentry-label": "ignore devtools action button",
-    testID: testID,
-    disabled: disabled,
-    onPress: onClick,
-    style: [styles.button, {
-      borderColor: disabled ? night.color.border : config.borderColor,
-      opacity: disabled ? 0.4 : 1
-    }],
-    activeOpacity: 0.7,
-    accessibilityRole: "button",
-    accessibilityLabel: text,
-    accessibilityState: {
-      disabled
-    },
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [styles.dot, {
-        backgroundColor: disabled ? night.color.textTertiary : config.dotColor
-      }]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: disabled ? night.color.textTertiary : config.textColor
-      }],
-      children: text
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 4,
-    borderWidth: 1,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    backgroundColor: "transparent"
-  },
-  dot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    marginRight: 6
-  },
-  text: {
-    fontSize: 12,
-    fontWeight: "500"
-  }
-});
+"use strict";import{TouchableOpacity as a,Text as s,View as C,StyleSheet as g}from"react-native";import{night as o}from"@buoy-gg/shared-ui";import{jsx as c,jsxs as b}from"react/jsx-runtime";const x={refetch:{dotColor:o.color.accent,textColor:o.color.text,borderColor:o.color.border},invalidate:{dotColor:o.color.warning,textColor:o.color.text,borderColor:o.color.border},reset:{dotColor:o.color.textSecondary,textColor:o.color.text,borderColor:o.color.border},remove:{dotColor:o.color.danger,textColor:o.color.danger,borderColor:o.color.danger+"40"},triggerLoading:{dotColor:o.color.info,textColor:o.color.info,borderColor:o.color.info+"40"},triggerError:{dotColor:o.color.danger,textColor:o.color.danger,borderColor:o.color.danger+"40"}};export default function u({onClick:n,text:l,variant:i,disabled:r,testID:d}){const t=x[i];return b(a,{"sentry-label":"ignore devtools action button",testID:d,disabled:r,onPress:n,style:[e.button,{borderColor:r?o.color.border:t.borderColor,opacity:r?.4:1}],activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:l,accessibilityState:{disabled:r},children:[c(C,{style:[e.dot,{backgroundColor:r?o.color.textTertiary:t.dotColor}]}),c(s,{style:[e.text,{color:r?o.color.textTertiary:t.textColor}],children:l})]})}const e=g.create({button:{flexDirection:"row",alignItems:"center",justifyContent:"center",borderRadius:4,borderWidth:1,paddingHorizontal:8,paddingVertical:4,backgroundColor:"transparent"},dot:{width:6,height:6,borderRadius:3,marginRight:6},text:{fontSize:12,fontWeight:"500"}});

package/lib/module/react-query/components/query-browser/ClearCacheButton.js

@@ -1,49 +1 @@
-"use strict";
-
-import { TouchableOpacity, StyleSheet } from "react-native";
-import { Trash, night } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Icon-only button for clearing either the query or mutation cache from the dev tools UI.
- */
-const ClearCacheButton = ({
-  type,
-  onClear,
-  disabled = false
-}) => {
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": "ignore devtools clear cache button",
-    style: [styles.button, disabled && styles.disabledButton],
-    onPress: onClear,
-    disabled: disabled,
-    activeOpacity: 0.7,
-    accessibilityLabel: `Clear ${type} cache`,
-    accessibilityRole: "button",
-    accessibilityState: {
-      disabled
-    },
-    children: /*#__PURE__*/_jsx(Trash, {
-      size: 16,
-      strokeWidth: 2,
-      color: disabled ? night.color.textTertiary : night.color.warning
-    })
-  });
-};
-const styles = StyleSheet.create({
-  button: {
-    width: 32,
-    height: 32,
-    borderRadius: 6,
-    backgroundColor: night.color.warningSoft,
-    justifyContent: "center",
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: night.color.warning + "33"
-  },
-  disabledButton: {
-    opacity: 0.5,
-    backgroundColor: night.color.fill,
-    borderColor: night.color.border
-  }
-});
-export default ClearCacheButton;
+"use strict";import{TouchableOpacity as l,StyleSheet as a}from"react-native";import{Trash as n,night as t}from"@buoy-gg/shared-ui";import{jsx as r}from"react/jsx-runtime";const s=({type:c,onClear:i,disabled:o=false})=>{return r(l,{"sentry-label":"ignore devtools clear cache button",style:[e.button,o&&e.disabledButton],onPress:i,disabled:o,activeOpacity:.7,accessibilityLabel:`Clear ${c} cache`,accessibilityRole:"button",accessibilityState:{disabled:o},children:r(n,{size:16,strokeWidth:2,color:o?t.color.textTertiary:t.color.warning})})};const e=a.create({button:{width:32,height:32,borderRadius:6,backgroundColor:t.color.warningSoft,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:t.color.warning+"33"},disabledButton:{opacity:.5,backgroundColor:t.color.fill,borderColor:t.color.border}});export default s;

package/lib/module/react-query/components/query-browser/Explorer.js

@@ -1,70 +1 @@
-"use strict";
-
-/**
- * React Query's data explorer — now a thin wrapper over shared-ui's
- * {@link LiveExplorer}, which is this component's own implementation hoisted
- * so every tool (react-query, zustand, storage, whatever comes next) edits
- * data through ONE live editor.
- *
- * Everything RQ-specific stays here and only here:
- * - the WRITER: edits go through `queryClient.setQueryData` against the
- *   active query (deletes via `deleteItem`, which forces a fresh reference so
- *   observers re-render);
- * - the HANDLE scheme: `explorerTestID` keeps every existing
- *   `buoy-rq-explorer-*` testID exactly as the Detox suite knows them;
- * - the cadence: `debounceMs: 0` — a cache write is free and unlogged, so RQ
- *   keeps its original per-keystroke behavior.
- */
-
-import { useMemo } from "react";
-import { useQueryClient } from "@tanstack/react-query";
-import { updateNestedDataByPath } from "../../utils/updateNestedDataByPath";
-import deleteItem from "../../utils/actions/deleteItem";
-import { explorerTestID } from "../../utils/testIDs";
-import { LiveExplorer } from "@buoy-gg/shared-ui/dataViewer";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Recursive data explorer component used for both editable and read-only JSON
- * trees inside the React Query dev tools.
- */
-export default function Explorer({
-  editable,
-  label,
-  value,
-  defaultExpanded,
-  activeQuery,
-  dataPath,
-  itemsDeletable,
-  dataVersion = 0
-}) {
-  const queryClient = useQueryClient();
-  const writer = useMemo(() => {
-    if (!activeQuery) return undefined;
-    return {
-      update: (path, next) => {
-        const oldData = activeQuery.state.data;
-        const newData = updateNestedDataByPath(oldData, path, next);
-        queryClient.setQueryData(activeQuery.queryKey, newData);
-      },
-      remove: path => {
-        deleteItem({
-          queryClient,
-          activeQuery,
-          dataPath: path
-        });
-      }
-    };
-  }, [queryClient, activeQuery]);
-  return /*#__PURE__*/_jsx(LiveExplorer, {
-    editable: editable,
-    label: label,
-    value: value,
-    defaultExpanded: defaultExpanded,
-    writer: writer,
-    dataPath: dataPath,
-    itemsDeletable: itemsDeletable,
-    dataVersion: dataVersion,
-    testIDForPath: explorerTestID,
-    debounceMs: 0
-  });
-}
+"use strict";import{useMemo as x}from"react";import{useQueryClient as D}from"@tanstack/react-query";import{updateNestedDataByPath as b}from"../../utils/updateNestedDataByPath";import h from"../../utils/actions/deleteItem";import{explorerTestID as P}from"../../utils/testIDs";import{LiveExplorer as c}from"@buoy-gg/shared-ui/dataViewer";import{jsx as w}from"react/jsx-runtime";export default function E({editable:o,label:a,value:s,defaultExpanded:m,activeQuery:t,dataPath:d,itemsDeletable:n,dataVersion:i=0}){const e=D();const l=x(()=>{if(!t)return void 0;return{update:(r,p)=>{const u=t.state.data;const f=b(u,r,p);e.setQueryData(t.queryKey,f)},remove:r=>{h({queryClient:e,activeQuery:t,dataPath:r})}}},[e,t]);return w(c,{editable:o,label:a,value:s,defaultExpanded:m,writer:l,dataPath:d,itemsDeletable:n,dataVersion:i,testIDForPath:P,debounceMs:0})}

package/lib/module/react-query/components/query-browser/MutationButton.js

@@ -1,186 +1 @@
-"use strict";
-
-import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { CheckCircle, LoadingCircle, PauseCircle, XCircle } from "./svgs";
-import { buoyColors, night, useRelativeTime, monoFont } from "@buoy-gg/shared-ui";
-import { mutationRowTestID } from "../../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getMutationText = mutation => {
-  if (!mutation.options.mutationKey) return "Anonymous Mutation";
-  const keys = Array.isArray(mutation.options.mutationKey) ? mutation.options.mutationKey : [mutation.options.mutationKey];
-  return keys.filter(k => k != null).map(k => String(k)).join(" › ") || "Anonymous Mutation";
-};
-/**
- * List-row button for displaying mutation metadata and selecting it for detail inspection.
- */
-export default function MutationButton({
-  mutation,
-  setSelectedMutation,
-  selected
-}) {
-  const submittedAt = new Date(mutation.state.submittedAt).toLocaleTimeString();
-
-  // Get the best available timestamp for this mutation
-  const bestTimestamp = (() => {
-    if (mutation.state.submittedAt && mutation.state.submittedAt > 0) {
-      return mutation.state.submittedAt;
-    }
-    // @ts-ignore - exploring state fields for debugging
-    const stateAny = mutation.state;
-    if (stateAny.updatedAt && stateAny.updatedAt > 0) {
-      return stateAny.updatedAt;
-    }
-    return null;
-  })();
-  const relativeTime = useRelativeTime(bestTimestamp);
-  const lastUpdated = relativeTime || `N/A (${mutation.state.submittedAt || 0})`;
-  const getStatusInfo = () => {
-    if (mutation.state.isPaused) {
-      return {
-        status: "Paused",
-        color: buoyColors.textMuted,
-        icon: /*#__PURE__*/_jsx(PauseCircle, {})
-      };
-    }
-    switch (mutation.state.status) {
-      case "success":
-        return {
-          status: "Success",
-          color: buoyColors.success,
-          icon: /*#__PURE__*/_jsx(CheckCircle, {})
-        };
-      case "error":
-        return {
-          status: "Error",
-          color: buoyColors.error,
-          icon: /*#__PURE__*/_jsx(XCircle, {})
-        };
-      case "pending":
-        return {
-          status: "Loading",
-          color: buoyColors.primary,
-          icon: /*#__PURE__*/_jsx(LoadingCircle, {})
-        };
-      default:
-        return {
-          status: "Idle",
-          color: buoyColors.textMuted,
-          icon: null
-        };
-    }
-  };
-  const statusInfo = getStatusInfo();
-  const mutationText = getMutationText(mutation);
-  const testID = mutationRowTestID(mutation.options.mutationKey, mutation.mutationId);
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    "sentry-label": "ignore devtools mutation button",
-    testID: testID,
-    accessibilityRole: "button"
-    // Same Fabric merge as the query rows: without a spelled-out label the
-    // row announces as an unnamed button.
-    ,
-    accessibilityLabel: `${mutationText}, ${statusInfo.status}`,
-    onPress: () => setSelectedMutation(mutation === selected ? undefined : mutation),
-    style: [styles.button, selected?.mutationId === mutation.mutationId && styles.selected],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.rowContent,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.statusSection,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.statusDot, {
-            backgroundColor: statusInfo.color
-          }]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.statusInfo,
-          children: [/*#__PURE__*/_jsx(Text, {
-            testID: `${testID}-status`,
-            style: [styles.statusLabel, {
-              color: statusInfo.color
-            }],
-            children: statusInfo.status
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.submittedText,
-            children: submittedAt
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.mutationSection,
-        children: /*#__PURE__*/_jsx(Text, {
-          testID: `${testID}-key`,
-          style: styles.mutationKey,
-          children: mutationText
-        })
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.bottomRightContainer,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.bottomRightText,
-        children: lastUpdated
-      })
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    marginHorizontal: 8,
-    marginVertical: 3,
-    padding: 12
-  },
-  selected: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  rowContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  statusSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    flex: 1
-  },
-  statusDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4
-  },
-  statusInfo: {
-    flex: 1
-  },
-  statusLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    lineHeight: 14
-  },
-  submittedText: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    marginTop: 1
-  },
-  mutationSection: {
-    flex: 2,
-    paddingHorizontal: 12
-  },
-  mutationKey: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    color: night.color.text,
-    lineHeight: 16
-  },
-  bottomRightContainer: {
-    position: "absolute",
-    bottom: 4,
-    right: 8
-  },
-  bottomRightText: {
-    fontSize: 9,
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  }
-});
+"use strict";import{TouchableOpacity as C,Text as l,View as n,StyleSheet as S}from"react-native";import{CheckCircle as T,LoadingCircle as A,PauseCircle as I,XCircle as w}from"./svgs";import{buoyColors as i,night as s,useRelativeTime as D,monoFont as b}from"@buoy-gg/shared-ui";import{mutationRowTestID as R}from"../../utils/testIDs";import{jsx as o,jsxs as c}from"react/jsx-runtime";const K=t=>{if(!t.options.mutationKey)return"Anonymous Mutation";const u=Array.isArray(t.options.mutationKey)?t.options.mutationKey:[t.options.mutationKey];return u.filter(r=>r!=null).map(r=>String(r)).join(" \u203A ")||"Anonymous Mutation"};export default function j({mutation:t,setSelectedMutation:u,selected:r}){const f=new Date(t.state.submittedAt).toLocaleTimeString();const g=(()=>{if(t.state.submittedAt&&t.state.submittedAt>0){return t.state.submittedAt}const m=t.state;if(m.updatedAt&&m.updatedAt>0){return m.updatedAt}return null})();const h=D(g);const p=h||`N/A (${t.state.submittedAt||0})`;const x=()=>{if(t.state.isPaused){return{status:"Paused",color:i.textMuted,icon:o(I,{})}}switch(t.state.status){case"success":return{status:"Success",color:i.success,icon:o(T,{})};case"error":return{status:"Error",color:i.error,icon:o(w,{})};case"pending":return{status:"Loading",color:i.primary,icon:o(A,{})};default:return{status:"Idle",color:i.textMuted,icon:null}}};const a=x();const y=K(t);const d=R(t.options.mutationKey,t.mutationId);return c(C,{"sentry-label":"ignore devtools mutation button",testID:d,accessibilityRole:"button",accessibilityLabel:`${y}, ${a.status}`,onPress:()=>u(t===r?void 0:t),style:[e.button,r?.mutationId===t.mutationId&&e.selected],children:[c(n,{style:e.rowContent,children:[c(n,{style:e.statusSection,children:[o(n,{style:[e.statusDot,{backgroundColor:a.color}]}),c(n,{style:e.statusInfo,children:[o(l,{testID:`${d}-status`,style:[e.statusLabel,{color:a.color}],children:a.status}),o(l,{style:e.submittedText,children:f})]})]}),o(n,{style:e.mutationSection,children:o(l,{testID:`${d}-key`,style:e.mutationKey,children:y})})]}),o(n,{style:e.bottomRightContainer,children:o(l,{style:e.bottomRightText,children:p})})]})}const e=S.create({button:{backgroundColor:s.color.surface,borderRadius:8,borderWidth:1,borderColor:s.color.border,marginHorizontal:8,marginVertical:3,padding:12},selected:{backgroundColor:s.color.accentSoft,borderColor:s.color.accentBorderStrong},rowContent:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},statusSection:{flexDirection:"row",alignItems:"center",gap:8,flex:1},statusDot:{width:8,height:8,borderRadius:4},statusInfo:{flex:1},statusLabel:{fontSize:11,fontWeight:"600",lineHeight:14},submittedText:{fontSize:10,color:s.color.textTertiary,marginTop:1},mutationSection:{flex:2,paddingHorizontal:12},mutationKey:{fontFamily:b,fontSize:12,color:s.color.text,lineHeight:16},bottomRightContainer:{position:"absolute",bottom:4,right:8},bottomRightText:{fontSize:9,color:s.color.textTertiary,fontFamily:b}});