react-native-inapp-inspector 2.3.14 → 2.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/README.md +1 -0
  2. package/dist/commonjs/components/AnimatedEntrance.js +3 -3
  3. package/dist/commonjs/components/ConsoleLogCard.js +174 -100
  4. package/dist/commonjs/components/Inspector/AnalyticsTab.js +0 -22
  5. package/dist/commonjs/components/Inspector/ConsoleTab.js +25 -38
  6. package/dist/commonjs/components/Inspector/CrashTab.js +19 -28
  7. package/dist/commonjs/components/Inspector/DeviceInfoTab.js +198 -98
  8. package/dist/commonjs/components/Inspector/FeedbackModal.d.ts +7 -0
  9. package/dist/commonjs/components/Inspector/FeedbackModal.js +552 -0
  10. package/dist/commonjs/components/Inspector/InspectorHeader.js +58 -6
  11. package/dist/commonjs/components/Inspector/MainScreen.js +100 -58
  12. package/dist/commonjs/components/Inspector/NetworkTab.js +26 -371
  13. package/dist/commonjs/components/Inspector/NpmStarPrompt.d.ts +3 -0
  14. package/dist/commonjs/components/Inspector/NpmStarPrompt.js +494 -0
  15. package/dist/commonjs/components/Inspector/PerformanceTab.js +40 -7
  16. package/dist/commonjs/components/Inspector/ReduxTab.js +3 -23
  17. package/dist/commonjs/components/Inspector/SettingsPanel.js +1035 -173
  18. package/dist/commonjs/components/Inspector/StorageTab.js +23 -28
  19. package/dist/commonjs/components/Inspector/TabBar.js +50 -15
  20. package/dist/commonjs/components/JsonViewer.js +14 -2
  21. package/dist/commonjs/components/LogCard.js +428 -227
  22. package/dist/commonjs/components/NetworkIcons.d.ts +5 -0
  23. package/dist/commonjs/components/NetworkIcons.js +33 -2
  24. package/dist/commonjs/constants/version.d.ts +1 -1
  25. package/dist/commonjs/constants/version.js +1 -1
  26. package/dist/commonjs/customHooks/analyticsLogger.js +1 -1
  27. package/dist/commonjs/customHooks/consoleLogger.js +34 -2
  28. package/dist/commonjs/customHooks/crashHandler.js +1 -1
  29. package/dist/commonjs/customHooks/networkLogger.js +184 -26
  30. package/dist/commonjs/helpers/index.d.ts +1 -0
  31. package/dist/commonjs/helpers/index.js +1 -0
  32. package/dist/commonjs/helpers/remoteConfig.d.ts +4 -0
  33. package/dist/commonjs/helpers/remoteConfig.js +165 -0
  34. package/dist/commonjs/helpers/searchQueryParser.d.ts +1 -1
  35. package/dist/commonjs/helpers/searchQueryParser.js +39 -291
  36. package/dist/commonjs/helpers/telemetry.d.ts +5 -0
  37. package/dist/commonjs/helpers/telemetry.js +339 -8
  38. package/dist/commonjs/index.d.ts +1 -0
  39. package/dist/commonjs/index.js +173 -29
  40. package/dist/commonjs/styles/AppFonts.d.ts +2 -0
  41. package/dist/commonjs/styles/AppFonts.js +1 -0
  42. package/dist/commonjs/styles/index.d.ts +22 -0
  43. package/dist/commonjs/styles/index.js +19 -0
  44. package/dist/commonjs/types/enums.d.ts +1 -0
  45. package/dist/commonjs/types/enums.js +1 -0
  46. package/dist/commonjs/types/interfaces.d.ts +12 -0
  47. package/dist/esm/components/AnimatedEntrance.js +3 -3
  48. package/dist/esm/components/ConsoleLogCard.js +141 -100
  49. package/dist/esm/components/Inspector/AnalyticsTab.js +1 -23
  50. package/dist/esm/components/Inspector/ConsoleTab.js +26 -39
  51. package/dist/esm/components/Inspector/CrashTab.js +20 -29
  52. package/dist/esm/components/Inspector/DeviceInfoTab.js +198 -98
  53. package/dist/esm/components/Inspector/FeedbackModal.d.ts +7 -0
  54. package/dist/esm/components/Inspector/FeedbackModal.js +515 -0
  55. package/dist/esm/components/Inspector/InspectorHeader.js +60 -8
  56. package/dist/esm/components/Inspector/MainScreen.js +101 -59
  57. package/dist/esm/components/Inspector/NetworkTab.js +27 -372
  58. package/dist/esm/components/Inspector/NpmStarPrompt.d.ts +3 -0
  59. package/dist/esm/components/Inspector/NpmStarPrompt.js +454 -0
  60. package/dist/esm/components/Inspector/PerformanceTab.js +40 -7
  61. package/dist/esm/components/Inspector/ReduxTab.js +4 -24
  62. package/dist/esm/components/Inspector/SettingsPanel.js +1038 -176
  63. package/dist/esm/components/Inspector/StorageTab.js +23 -28
  64. package/dist/esm/components/Inspector/TabBar.js +50 -15
  65. package/dist/esm/components/JsonViewer.js +14 -2
  66. package/dist/esm/components/LogCard.js +422 -221
  67. package/dist/esm/components/NetworkIcons.d.ts +5 -0
  68. package/dist/esm/components/NetworkIcons.js +26 -0
  69. package/dist/esm/constants/version.d.ts +1 -1
  70. package/dist/esm/constants/version.js +1 -1
  71. package/dist/esm/customHooks/analyticsLogger.js +1 -1
  72. package/dist/esm/customHooks/consoleLogger.js +34 -2
  73. package/dist/esm/customHooks/crashHandler.js +1 -1
  74. package/dist/esm/customHooks/networkLogger.js +184 -26
  75. package/dist/esm/helpers/index.d.ts +1 -0
  76. package/dist/esm/helpers/index.js +1 -0
  77. package/dist/esm/helpers/remoteConfig.d.ts +4 -0
  78. package/dist/esm/helpers/remoteConfig.js +160 -0
  79. package/dist/esm/helpers/searchQueryParser.d.ts +1 -1
  80. package/dist/esm/helpers/searchQueryParser.js +39 -291
  81. package/dist/esm/helpers/telemetry.d.ts +5 -0
  82. package/dist/esm/helpers/telemetry.js +332 -9
  83. package/dist/esm/index.d.ts +1 -0
  84. package/dist/esm/index.js +171 -29
  85. package/dist/esm/styles/AppFonts.d.ts +2 -0
  86. package/dist/esm/styles/AppFonts.js +1 -0
  87. package/dist/esm/styles/index.d.ts +22 -0
  88. package/dist/esm/styles/index.js +19 -0
  89. package/dist/esm/types/enums.d.ts +1 -0
  90. package/dist/esm/types/enums.js +1 -0
  91. package/dist/esm/types/interfaces.d.ts +12 -0
  92. package/package.json +1 -1
  93. package/src/components/AnimatedEntrance.tsx +3 -3
  94. package/src/components/ConsoleLogCard.tsx +154 -103
  95. package/src/components/Inspector/AnalyticsTab.tsx +0 -23
  96. package/src/components/Inspector/ConsoleTab.tsx +27 -41
  97. package/src/components/Inspector/CrashTab.tsx +19 -28
  98. package/src/components/Inspector/DeviceInfoTab.tsx +224 -102
  99. package/src/components/Inspector/FeedbackModal.tsx +626 -0
  100. package/src/components/Inspector/InspectorHeader.tsx +83 -5
  101. package/src/components/Inspector/MainScreen.tsx +61 -6
  102. package/src/components/Inspector/NetworkTab.tsx +70 -480
  103. package/src/components/Inspector/NpmStarPrompt.tsx +532 -0
  104. package/src/components/Inspector/PerformanceTab.tsx +44 -8
  105. package/src/components/Inspector/ReduxTab.tsx +9 -24
  106. package/src/components/Inspector/SettingsPanel.tsx +1162 -197
  107. package/src/components/Inspector/StorageTab.tsx +27 -30
  108. package/src/components/Inspector/TabBar.tsx +57 -20
  109. package/src/components/JsonViewer.tsx +15 -2
  110. package/src/components/LogCard.tsx +528 -339
  111. package/src/components/NetworkIcons.tsx +92 -0
  112. package/src/constants/version.ts +1 -1
  113. package/src/customHooks/analyticsLogger.ts +1 -1
  114. package/src/customHooks/consoleLogger.ts +36 -3
  115. package/src/customHooks/crashHandler.ts +1 -1
  116. package/src/customHooks/networkLogger.ts +214 -26
  117. package/src/helpers/index.ts +1 -0
  118. package/src/helpers/remoteConfig.ts +212 -0
  119. package/src/helpers/searchQueryParser.ts +42 -284
  120. package/src/helpers/telemetry.ts +381 -10
  121. package/src/index.tsx +374 -211
  122. package/src/styles/AppFonts.ts +2 -0
  123. package/src/styles/index.ts +20 -1
  124. package/src/types/enums.ts +1 -0
  125. package/src/types/interfaces.ts +12 -0
@@ -0,0 +1,494 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ var __importDefault = (this && this.__importDefault) || function (mod) {
36
+ return (mod && mod.__esModule) ? mod : { "default": mod };
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ exports.NpmStarPrompt = void 0;
40
+ const react_1 = __importStar(require("react"));
41
+ const react_native_1 = require("react-native");
42
+ const AppColors_1 = require("../../styles/AppColors");
43
+ const AppFonts_1 = require("../../styles/AppFonts");
44
+ const TouchableScale_1 = __importDefault(require("../TouchableScale"));
45
+ const settingsStore_1 = require("../../helpers/settingsStore");
46
+ const telemetry_1 = require("../../helpers/telemetry");
47
+ const NetworkIcons_1 = require("../NetworkIcons");
48
+ const FIVE_DAYS_MS = 5 * 24 * 60 * 60 * 1000;
49
+ const GITHUB_REPO_URL = 'https://github.com/vengatmacuser/react-native-inapp-inspector';
50
+ const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/react-native-inapp-inspector';
51
+ const NpmStarPrompt = () => {
52
+ const [isOpen, setIsOpen] = (0, react_1.useState)(false);
53
+ const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(200)).current;
54
+ const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
55
+ const pulseAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
56
+ (0, react_1.useEffect)(() => {
57
+ let isMounted = true;
58
+ async function checkEligibility() {
59
+ try {
60
+ const settings = await (0, settingsStore_1.loadSettings)();
61
+ if (settings.starPromptActioned) {
62
+ return;
63
+ }
64
+ const now = Date.now();
65
+ const firstSeen = settings.starPromptFirstSeen || now;
66
+ if (!settings.starPromptFirstSeen) {
67
+ await (0, settingsStore_1.saveSettings)({
68
+ ...settings,
69
+ starPromptFirstSeen: now,
70
+ });
71
+ }
72
+ const lastShown = settings.starPromptLastShown || firstSeen;
73
+ const timeElapsed = now - lastShown;
74
+ if (timeElapsed >= FIVE_DAYS_MS) {
75
+ const shouldShow = Math.random() < 0.65;
76
+ if (shouldShow && isMounted) {
77
+ setTimeout(() => {
78
+ if (isMounted) {
79
+ openPrompt();
80
+ }
81
+ }, 1800);
82
+ }
83
+ }
84
+ }
85
+ catch {
86
+ }
87
+ }
88
+ checkEligibility();
89
+ return () => {
90
+ isMounted = false;
91
+ };
92
+ }, []);
93
+ const openPrompt = async () => {
94
+ setIsOpen(true);
95
+ try {
96
+ const settings = await (0, settingsStore_1.loadSettings)();
97
+ await (0, settingsStore_1.saveSettings)({
98
+ ...settings,
99
+ starPromptLastShown: Date.now(),
100
+ });
101
+ (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_shown', {
102
+ trigger: '5_day_interval',
103
+ platform: react_native_1.Platform.OS,
104
+ });
105
+ }
106
+ catch { }
107
+ react_native_1.Animated.parallel([
108
+ react_native_1.Animated.spring(slideAnim, {
109
+ toValue: 0,
110
+ friction: 8,
111
+ tension: 50,
112
+ useNativeDriver: true,
113
+ }),
114
+ react_native_1.Animated.timing(fadeAnim, {
115
+ toValue: 1,
116
+ duration: 250,
117
+ useNativeDriver: true,
118
+ }),
119
+ ]).start();
120
+ react_native_1.Animated.loop(react_native_1.Animated.sequence([
121
+ react_native_1.Animated.timing(pulseAnim, {
122
+ toValue: 1.15,
123
+ duration: 900,
124
+ useNativeDriver: true,
125
+ }),
126
+ react_native_1.Animated.timing(pulseAnim, {
127
+ toValue: 1,
128
+ duration: 900,
129
+ useNativeDriver: true,
130
+ }),
131
+ ])).start();
132
+ };
133
+ const closePrompt = (callback) => {
134
+ react_native_1.Animated.parallel([
135
+ react_native_1.Animated.timing(fadeAnim, {
136
+ toValue: 0,
137
+ duration: 180,
138
+ useNativeDriver: true,
139
+ }),
140
+ react_native_1.Animated.timing(slideAnim, {
141
+ toValue: 200,
142
+ duration: 180,
143
+ useNativeDriver: true,
144
+ }),
145
+ ]).start(() => {
146
+ setIsOpen(false);
147
+ if (callback)
148
+ callback();
149
+ });
150
+ };
151
+ const handleStarNow = async () => {
152
+ try {
153
+ const settings = await (0, settingsStore_1.loadSettings)();
154
+ await (0, settingsStore_1.saveSettings)({
155
+ ...settings,
156
+ starPromptActioned: true,
157
+ });
158
+ (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
159
+ action: 'starred',
160
+ platform: react_native_1.Platform.OS,
161
+ });
162
+ }
163
+ catch { }
164
+ closePrompt(() => {
165
+ react_native_1.Linking.openURL(GITHUB_REPO_URL).catch(() => {
166
+ react_native_1.Linking.openURL(NPM_PACKAGE_URL).catch(() => { });
167
+ });
168
+ });
169
+ };
170
+ const handleAlreadyStarred = async () => {
171
+ try {
172
+ const settings = await (0, settingsStore_1.loadSettings)();
173
+ await (0, settingsStore_1.saveSettings)({
174
+ ...settings,
175
+ starPromptActioned: true,
176
+ });
177
+ (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
178
+ action: 'already_starred',
179
+ platform: react_native_1.Platform.OS,
180
+ });
181
+ }
182
+ catch { }
183
+ closePrompt();
184
+ };
185
+ const handleRemindLater = async () => {
186
+ try {
187
+ const settings = await (0, settingsStore_1.loadSettings)();
188
+ await (0, settingsStore_1.saveSettings)({
189
+ ...settings,
190
+ starPromptLastShown: Date.now(),
191
+ });
192
+ (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
193
+ action: 'remind_later',
194
+ platform: react_native_1.Platform.OS,
195
+ });
196
+ }
197
+ catch { }
198
+ closePrompt();
199
+ };
200
+ const handleDontAskAgain = async () => {
201
+ try {
202
+ const settings = await (0, settingsStore_1.loadSettings)();
203
+ await (0, settingsStore_1.saveSettings)({
204
+ ...settings,
205
+ starPromptActioned: true,
206
+ });
207
+ (0, telemetry_1.trackTelemetryEvent)('npm_star_prompt_action', {
208
+ action: 'dont_ask_again',
209
+ platform: react_native_1.Platform.OS,
210
+ });
211
+ }
212
+ catch { }
213
+ closePrompt();
214
+ };
215
+ if (!isOpen)
216
+ return null;
217
+ return (<react_native_1.Modal transparent visible={isOpen} animationType="none" onRequestClose={handleRemindLater}>
218
+ <react_native_1.Animated.View style={[
219
+ styles.backdrop,
220
+ {
221
+ opacity: fadeAnim,
222
+ },
223
+ ]}>
224
+ <react_native_1.TouchableOpacity style={react_native_1.StyleSheet.absoluteFill} activeOpacity={1} onPress={handleRemindLater}/>
225
+
226
+ <react_native_1.Animated.View style={[
227
+ styles.cardContainer,
228
+ {
229
+ transform: [{ translateY: slideAnim }],
230
+ },
231
+ ]}>
232
+
233
+ <react_native_1.View style={styles.headerIconWrapper}>
234
+ <react_native_1.Animated.View style={[
235
+ styles.iconGlow,
236
+ {
237
+ transform: [{ scale: pulseAnim }],
238
+ },
239
+ ]}/>
240
+ <react_native_1.View style={styles.iconCircle}>
241
+ <NetworkIcons_1.StarIcon size={26} color="#F59E0B"/>
242
+ </react_native_1.View>
243
+ </react_native_1.View>
244
+
245
+
246
+ <react_native_1.TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} style={styles.closeBtn}>
247
+ <NetworkIcons_1.CloseWhite size={12} color={AppColors_1.AppColors.grayText}/>
248
+ </react_native_1.TouchableOpacity>
249
+
250
+
251
+ <react_native_1.View style={styles.pillBadge}>
252
+ <react_native_1.Text style={styles.pillBadgeText}>SUPPORT OPEN SOURCE</react_native_1.Text>
253
+ </react_native_1.View>
254
+
255
+
256
+ <react_native_1.Text style={styles.title}>Enjoying In-App Inspector?</react_native_1.Text>
257
+ <react_native_1.Text style={styles.description}>
258
+ If this debugging tool saves you time, please consider giving us a
259
+ star on GitHub & npm. Your support helps us build more features!
260
+ </react_native_1.Text>
261
+
262
+
263
+ <react_native_1.View style={styles.metricsBar}>
264
+ <react_native_1.View style={styles.metricItem}>
265
+ <NetworkIcons_1.GitHubIcon size={13} color={AppColors_1.AppColors.grayText}/>
266
+ <react_native_1.Text style={styles.metricText}>GitHub Star</react_native_1.Text>
267
+ </react_native_1.View>
268
+ <react_native_1.View style={styles.metricDot}/>
269
+ <react_native_1.View style={styles.metricItem}>
270
+ <NetworkIcons_1.NpmIcon size={13} color="#CB3837"/>
271
+ <react_native_1.Text style={styles.metricText}>npm Package</react_native_1.Text>
272
+ </react_native_1.View>
273
+ <react_native_1.View style={styles.metricDot}/>
274
+ <react_native_1.View style={styles.metricItem}>
275
+ <react_native_1.Text style={styles.metricText}>100% Free</react_native_1.Text>
276
+ </react_native_1.View>
277
+ </react_native_1.View>
278
+
279
+
280
+ <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Star on GitHub" onPress={handleStarNow} style={styles.primaryButton}>
281
+ <react_native_1.View style={styles.primaryButtonContent}>
282
+ <NetworkIcons_1.StarIcon size={16} color={AppColors_1.AppColors.white}/>
283
+ <react_native_1.Text style={styles.primaryButtonText}>⭐ Star on GitHub & npm</react_native_1.Text>
284
+ </react_native_1.View>
285
+ </TouchableScale_1.default>
286
+
287
+
288
+ <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="I already starred" onPress={handleAlreadyStarred} style={styles.secondaryButton}>
289
+ <react_native_1.View style={styles.secondaryButtonContent}>
290
+ <NetworkIcons_1.CheckIcon size={13} color={AppColors_1.AppColors.purple}/>
291
+ <react_native_1.Text style={styles.secondaryButtonText}>I Already Starred</react_native_1.Text>
292
+ </react_native_1.View>
293
+ </TouchableScale_1.default>
294
+
295
+
296
+ <react_native_1.View style={styles.footerRow}>
297
+ <react_native_1.TouchableOpacity onPress={handleRemindLater} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
298
+ <react_native_1.Text style={styles.footerLinkText}>Remind Me Later</react_native_1.Text>
299
+ </react_native_1.TouchableOpacity>
300
+
301
+ <react_native_1.View style={styles.footerSeparator}/>
302
+
303
+ <react_native_1.TouchableOpacity onPress={handleDontAskAgain} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
304
+ <react_native_1.Text style={styles.footerLinkTextMuted}>Don't Ask Again</react_native_1.Text>
305
+ </react_native_1.TouchableOpacity>
306
+ </react_native_1.View>
307
+ </react_native_1.Animated.View>
308
+ </react_native_1.Animated.View>
309
+ </react_native_1.Modal>);
310
+ };
311
+ exports.NpmStarPrompt = NpmStarPrompt;
312
+ const styles = react_native_1.StyleSheet.create({
313
+ backdrop: {
314
+ ...react_native_1.StyleSheet.absoluteFillObject,
315
+ backgroundColor: 'rgba(15, 23, 42, 0.65)',
316
+ justifyContent: 'center',
317
+ alignItems: 'center',
318
+ paddingHorizontal: 20,
319
+ zIndex: 99999,
320
+ },
321
+ cardContainer: {
322
+ width: '100%',
323
+ maxWidth: 380,
324
+ backgroundColor: AppColors_1.AppColors.white,
325
+ borderRadius: 22,
326
+ padding: 22,
327
+ alignItems: 'center',
328
+ shadowColor: AppColors_1.AppColors.black,
329
+ shadowOffset: { width: 0, height: 8 },
330
+ shadowOpacity: 0.22,
331
+ shadowRadius: 20,
332
+ elevation: 12,
333
+ borderWidth: 1.5,
334
+ borderColor: `${AppColors_1.AppColors.purple}25`,
335
+ },
336
+ headerIconWrapper: {
337
+ position: 'relative',
338
+ alignItems: 'center',
339
+ justifyContent: 'center',
340
+ marginBottom: 12,
341
+ },
342
+ iconGlow: {
343
+ position: 'absolute',
344
+ width: 68,
345
+ height: 68,
346
+ borderRadius: 34,
347
+ backgroundColor: '#F59E0B22',
348
+ },
349
+ iconCircle: {
350
+ width: 54,
351
+ height: 54,
352
+ borderRadius: 27,
353
+ backgroundColor: '#FEF3C7',
354
+ borderWidth: 2,
355
+ borderColor: '#FDE68A',
356
+ alignItems: 'center',
357
+ justifyContent: 'center',
358
+ },
359
+ closeBtn: {
360
+ position: 'absolute',
361
+ top: 14,
362
+ right: 14,
363
+ width: 28,
364
+ height: 28,
365
+ borderRadius: 14,
366
+ backgroundColor: AppColors_1.AppColors.grayBackground,
367
+ alignItems: 'center',
368
+ justifyContent: 'center',
369
+ },
370
+ pillBadge: {
371
+ backgroundColor: `${AppColors_1.AppColors.purple}14`,
372
+ paddingHorizontal: 9,
373
+ paddingVertical: 3,
374
+ borderRadius: 10,
375
+ marginBottom: 8,
376
+ },
377
+ pillBadgeText: {
378
+ fontFamily: AppFonts_1.AppFonts.interBold,
379
+ fontSize: 9.5,
380
+ color: AppColors_1.AppColors.purple,
381
+ letterSpacing: 0.6,
382
+ },
383
+ title: {
384
+ fontFamily: AppFonts_1.AppFonts.interBold,
385
+ fontSize: 18,
386
+ lineHeight: 23,
387
+ color: AppColors_1.AppColors.primaryBlack,
388
+ textAlign: 'center',
389
+ marginBottom: 6,
390
+ },
391
+ description: {
392
+ fontFamily: AppFonts_1.AppFonts.interRegular,
393
+ fontSize: 12.5,
394
+ lineHeight: 18,
395
+ color: AppColors_1.AppColors.grayText,
396
+ textAlign: 'center',
397
+ marginBottom: 14,
398
+ paddingHorizontal: 8,
399
+ },
400
+ metricsBar: {
401
+ flexDirection: 'row',
402
+ alignItems: 'center',
403
+ justifyContent: 'center',
404
+ backgroundColor: AppColors_1.AppColors.grayBackground,
405
+ paddingVertical: 7,
406
+ paddingHorizontal: 14,
407
+ borderRadius: 10,
408
+ marginBottom: 16,
409
+ gap: 8,
410
+ },
411
+ metricItem: {
412
+ flexDirection: 'row',
413
+ alignItems: 'center',
414
+ gap: 4,
415
+ },
416
+ metricText: {
417
+ fontFamily: AppFonts_1.AppFonts.interMedium,
418
+ fontSize: 11,
419
+ color: AppColors_1.AppColors.primaryBlack,
420
+ },
421
+ metricDot: {
422
+ width: 3.5,
423
+ height: 3.5,
424
+ borderRadius: 2,
425
+ backgroundColor: AppColors_1.AppColors.dividerColor,
426
+ },
427
+ primaryButton: {
428
+ width: '100%',
429
+ backgroundColor: AppColors_1.AppColors.purple,
430
+ borderRadius: 12,
431
+ paddingVertical: 12,
432
+ alignItems: 'center',
433
+ justifyContent: 'center',
434
+ marginBottom: 8,
435
+ shadowColor: AppColors_1.AppColors.purple,
436
+ shadowOffset: { width: 0, height: 4 },
437
+ shadowOpacity: 0.3,
438
+ shadowRadius: 8,
439
+ elevation: 4,
440
+ },
441
+ primaryButtonContent: {
442
+ flexDirection: 'row',
443
+ alignItems: 'center',
444
+ gap: 7,
445
+ },
446
+ primaryButtonText: {
447
+ fontFamily: AppFonts_1.AppFonts.interBold,
448
+ fontSize: 14,
449
+ color: AppColors_1.AppColors.white,
450
+ },
451
+ secondaryButton: {
452
+ width: '100%',
453
+ backgroundColor: `${AppColors_1.AppColors.purple}10`,
454
+ borderWidth: 1,
455
+ borderColor: `${AppColors_1.AppColors.purple}30`,
456
+ borderRadius: 12,
457
+ paddingVertical: 10,
458
+ alignItems: 'center',
459
+ justifyContent: 'center',
460
+ marginBottom: 14,
461
+ },
462
+ secondaryButtonContent: {
463
+ flexDirection: 'row',
464
+ alignItems: 'center',
465
+ gap: 6,
466
+ },
467
+ secondaryButtonText: {
468
+ fontFamily: AppFonts_1.AppFonts.interBold,
469
+ fontSize: 13,
470
+ color: AppColors_1.AppColors.purple,
471
+ },
472
+ footerRow: {
473
+ flexDirection: 'row',
474
+ alignItems: 'center',
475
+ justifyContent: 'center',
476
+ gap: 12,
477
+ },
478
+ footerLinkText: {
479
+ fontFamily: AppFonts_1.AppFonts.interMedium,
480
+ fontSize: 11.5,
481
+ color: AppColors_1.AppColors.grayText,
482
+ },
483
+ footerSeparator: {
484
+ width: 1,
485
+ height: 12,
486
+ backgroundColor: AppColors_1.AppColors.dividerColor,
487
+ },
488
+ footerLinkTextMuted: {
489
+ fontFamily: AppFonts_1.AppFonts.interRegular,
490
+ fontSize: 11.5,
491
+ color: AppColors_1.AppColors.grayTextWeak,
492
+ },
493
+ });
494
+ exports.default = exports.NpmStarPrompt;
@@ -51,6 +51,7 @@ const helpers_1 = require("../../helpers");
51
51
  const NetworkIcons_1 = require("../NetworkIcons");
52
52
  const performanceTracker_1 = require("../../customHooks/performanceTracker");
53
53
  const NativeInspector_1 = require("../../native/NativeInspector");
54
+ const telemetry_1 = require("../../helpers/telemetry");
54
55
  const PerformanceTab = react_1.default.memo(() => {
55
56
  const { t } = (0, i18n_1.useTranslation)();
56
57
  const [isRecording, setIsRecording] = (0, react_1.useState)(true);
@@ -186,10 +187,19 @@ const PerformanceTab = react_1.default.memo(() => {
186
187
  }, [isRecording]);
187
188
  const filteredEvents = (0, react_1.useMemo)(() => {
188
189
  return events.filter(e => {
189
- const matchSearch = !search ||
190
- e.label.toLowerCase().includes(search.toLowerCase()) ||
191
- e.detail.toLowerCase().includes(search.toLowerCase()) ||
192
- (e.source && e.source.toLowerCase().includes(search.toLowerCase()));
190
+ let matchSearch = true;
191
+ if (search && search.trim().length > 0) {
192
+ const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
193
+ const corpus = [
194
+ e.label || '',
195
+ e.detail || '',
196
+ e.source || '',
197
+ e.category || '',
198
+ e.severity || '',
199
+ e.bottleneckThread || '',
200
+ ].join(' ').toLowerCase();
201
+ matchSearch = queryTokens.every(tok => corpus.includes(tok));
202
+ }
193
203
  const matchFilter = filterCategory === 'ALL'
194
204
  ? true
195
205
  : filterCategory === 'JANKY'
@@ -366,7 +376,13 @@ const PerformanceTab = react_1.default.memo(() => {
366
376
  </react_native_1.View>
367
377
 
368
378
 
369
- <TouchableScale_1.default onPress={() => setIsRecording(prev => !prev)} style={[
379
+ <TouchableScale_1.default onPress={() => {
380
+ setIsRecording(prev => {
381
+ const next = !prev;
382
+ (0, telemetry_1.trackInspectorScreenRecord)(next ? 'start' : 'stop', 'performance_fps');
383
+ return next;
384
+ });
385
+ }} style={[
370
386
  perfStyles.recordToggleBtn,
371
387
  isRecording
372
388
  ? perfStyles.recordToggleActive
@@ -814,10 +830,27 @@ const PerformanceTab = react_1.default.memo(() => {
814
830
 
815
831
  {filteredEvents.length === 0 ? (<react_native_1.View style={perfStyles.emptyCard}>
816
832
  <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500} size={30}/>
817
- <react_native_1.Text style={perfStyles.emptyTitle}>{t('performance.emptyTitle')}</react_native_1.Text>
833
+ <react_native_1.Text style={perfStyles.emptyTitle}>
834
+ {search.trim().length > 0 ? 'No Matching Events' : t('performance.emptyTitle')}
835
+ </react_native_1.Text>
818
836
  <react_native_1.Text style={perfStyles.emptySub}>
819
- {t('performance.emptySubtitle')}
837
+ {search.trim().length > 0
838
+ ? `No performance events match "${search}"`
839
+ : t('performance.emptySubtitle')}
820
840
  </react_native_1.Text>
841
+ {search.trim().length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} style={{
842
+ marginTop: 10,
843
+ paddingHorizontal: 14,
844
+ paddingVertical: 6,
845
+ borderRadius: 8,
846
+ backgroundColor: AppColors_1.AppColors.grayBackground,
847
+ borderWidth: 1,
848
+ borderColor: AppColors_1.AppColors.grayBorderSecondary,
849
+ }}>
850
+ <react_native_1.Text style={{ color: AppColors_1.AppColors.brandPurple, fontSize: 12, fontFamily: AppFonts_1.AppFonts.interBold }}>
851
+ Clear Search
852
+ </react_native_1.Text>
853
+ </TouchableScale_1.default>)}
821
854
  </react_native_1.View>) : (filteredEvents.map(event => {
822
855
  const isOptimal = event.severity === 'optimal';
823
856
  const isWarning = event.severity === 'warning';
@@ -492,32 +492,12 @@ const ReduxTab = react_1.default.memo(() => {
492
492
  </react_native_1.View>
493
493
 
494
494
 
495
- <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
495
+ <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
496
+ ? `No Redux slices match "${reduxSearch}"`
497
+ : 'Attach the Redux store or dispatch actions to see state slices.'}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
496
498
  reduxTabStyles.listContent,
497
499
  filteredSlices.length === 0 && { flexGrow: 1 },
498
500
  ]} keyboardShouldPersistTaps="handled"/>
499
-
500
- <TouchableScale_1.default onPress={() => {
501
- try {
502
- listRef.current?.scrollToOffset({
503
- offset: 0,
504
- animated: true,
505
- });
506
- }
507
- catch {
508
- try {
509
- listRef.current?.scrollToIndex({
510
- index: 0,
511
- animated: true,
512
- });
513
- }
514
- catch { }
515
- }
516
- }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
517
- <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
518
- <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
519
- </react_native_1.View>
520
- </TouchableScale_1.default>
521
501
  </react_native_1.View>);
522
502
  });
523
503
  const reduxTabStyles = react_native_1.StyleSheet.create({