@buoy-gg/highlight-updates 7.0.35 → 7.0.38

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 (107) hide show
  1. package/README.md +28 -6
  2. package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js +1 -281
  3. package/lib/commonjs/highlight-updates/components/HighlightFilterView.js +1 -1474
  4. package/lib/commonjs/highlight-updates/components/HighlightUpdatesModal.js +1 -641
  5. package/lib/commonjs/highlight-updates/components/IdentifierBadge.js +1 -273
  6. package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js +1 -188
  7. package/lib/commonjs/highlight-updates/components/ModalHeaderContent.js +1 -293
  8. package/lib/commonjs/highlight-updates/components/RenderCauseBadge.js +1 -508
  9. package/lib/commonjs/highlight-updates/components/RenderDetailView.js +1 -846
  10. package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js +1 -915
  11. package/lib/commonjs/highlight-updates/components/RenderListItem.js +1 -235
  12. package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js +1 -466
  13. package/lib/commonjs/highlight-updates/components/StatsDisplay.js +1 -73
  14. package/lib/commonjs/highlight-updates/types/copySettings.js +1 -107
  15. package/lib/commonjs/highlight-updates/utils/CommitProfiler.js +1 -446
  16. package/lib/commonjs/highlight-updates/utils/HighlightUpdatesController.js +1 -1920
  17. package/lib/commonjs/highlight-updates/utils/PerformanceLogger.js +1 -359
  18. package/lib/commonjs/highlight-updates/utils/ProfilerInterceptor.js +1 -371
  19. package/lib/commonjs/highlight-updates/utils/RenderCauseDetector.js +1 -1840
  20. package/lib/commonjs/highlight-updates/utils/RenderTracker.js +1 -952
  21. package/lib/commonjs/highlight-updates/utils/ViewTypeMapper.js +1 -264
  22. package/lib/commonjs/highlight-updates/utils/copySettingsStorage.js +1 -32
  23. package/lib/commonjs/highlight-updates/utils/devtoolsComponentNames.js +1 -188
  24. package/lib/commonjs/highlight-updates/utils/namedComposite.js +1 -41
  25. package/lib/commonjs/highlight-updates/utils/ownStateChanged.js +1 -103
  26. package/lib/commonjs/highlight-updates/utils/rawEventEmitter.js +1 -50
  27. package/lib/commonjs/highlight-updates/utils/renderExportFormatter.js +1 -58
  28. package/lib/commonjs/highlight-updates/utils/rendersExportFormatter.js +1 -485
  29. package/lib/commonjs/highlight-updates/utils/screenElements.js +1 -1046
  30. package/lib/commonjs/highlight-updates/utils/tapMatch.js +1 -58
  31. package/lib/commonjs/highlight-updates/utils/testIDs.js +1 -68
  32. package/lib/commonjs/highlight-updates/utils/touchCapture.js +1 -277
  33. package/lib/commonjs/index.js +1 -429
  34. package/lib/commonjs/preset.js +1 -278
  35. package/lib/commonjs/sync/highlightUpdatesSyncAdapter.js +1 -235
  36. package/lib/module/highlight-updates/HighlightUpdatesOverlay.js +1 -274
  37. package/lib/module/highlight-updates/components/HighlightFilterView.js +1 -1468
  38. package/lib/module/highlight-updates/components/HighlightUpdatesModal.js +1 -634
  39. package/lib/module/highlight-updates/components/IdentifierBadge.js +1 -265
  40. package/lib/module/highlight-updates/components/IsolatedRenderList.js +1 -183
  41. package/lib/module/highlight-updates/components/ModalHeaderContent.js +1 -288
  42. package/lib/module/highlight-updates/components/RenderCauseBadge.js +1 -499
  43. package/lib/module/highlight-updates/components/RenderDetailView.js +1 -840
  44. package/lib/module/highlight-updates/components/RenderHistoryViewer.js +1 -908
  45. package/lib/module/highlight-updates/components/RenderListItem.js +1 -230
  46. package/lib/module/highlight-updates/components/RendersCopySettingsView.js +1 -462
  47. package/lib/module/highlight-updates/components/StatsDisplay.js +1 -70
  48. package/lib/module/highlight-updates/types/copySettings.js +1 -102
  49. package/lib/module/highlight-updates/utils/CommitProfiler.js +1 -442
  50. package/lib/module/highlight-updates/utils/HighlightUpdatesController.js +1 -1916
  51. package/lib/module/highlight-updates/utils/PerformanceLogger.js +1 -353
  52. package/lib/module/highlight-updates/utils/ProfilerInterceptor.js +1 -358
  53. package/lib/module/highlight-updates/utils/RenderCauseDetector.js +1 -1830
  54. package/lib/module/highlight-updates/utils/RenderTracker.js +1 -949
  55. package/lib/module/highlight-updates/utils/ViewTypeMapper.js +1 -255
  56. package/lib/module/highlight-updates/utils/copySettingsStorage.js +1 -26
  57. package/lib/module/highlight-updates/utils/devtoolsComponentNames.js +1 -178
  58. package/lib/module/highlight-updates/utils/namedComposite.js +1 -36
  59. package/lib/module/highlight-updates/utils/ownStateChanged.js +1 -98
  60. package/lib/module/highlight-updates/utils/rawEventEmitter.js +1 -46
  61. package/lib/module/highlight-updates/utils/renderExportFormatter.js +1 -54
  62. package/lib/module/highlight-updates/utils/rendersExportFormatter.js +1 -478
  63. package/lib/module/highlight-updates/utils/screenElements.js +1 -1040
  64. package/lib/module/highlight-updates/utils/tapMatch.js +1 -52
  65. package/lib/module/highlight-updates/utils/testIDs.js +1 -60
  66. package/lib/module/highlight-updates/utils/touchCapture.js +1 -270
  67. package/lib/module/index.js +1 -130
  68. package/lib/module/preset.js +1 -272
  69. package/lib/module/sync/highlightUpdatesSyncAdapter.js +1 -230
  70. package/lib/typescript/highlight-updates/utils/screenElements.d.ts +52 -1
  71. package/lib/typescript/highlight-updates/utils/tapMatch.d.ts +11 -0
  72. package/lib/typescript/sync/highlightUpdatesSyncAdapter.d.ts +1 -1
  73. package/package.json +8 -8
  74. package/lib/typescript/highlight-updates/HighlightUpdatesOverlay.d.ts.map +0 -1
  75. package/lib/typescript/highlight-updates/components/HighlightFilterView.d.ts.map +0 -1
  76. package/lib/typescript/highlight-updates/components/HighlightUpdatesModal.d.ts.map +0 -1
  77. package/lib/typescript/highlight-updates/components/IdentifierBadge.d.ts.map +0 -1
  78. package/lib/typescript/highlight-updates/components/IsolatedRenderList.d.ts.map +0 -1
  79. package/lib/typescript/highlight-updates/components/ModalHeaderContent.d.ts.map +0 -1
  80. package/lib/typescript/highlight-updates/components/RenderCauseBadge.d.ts.map +0 -1
  81. package/lib/typescript/highlight-updates/components/RenderDetailView.d.ts.map +0 -1
  82. package/lib/typescript/highlight-updates/components/RenderHistoryViewer.d.ts.map +0 -1
  83. package/lib/typescript/highlight-updates/components/RenderListItem.d.ts.map +0 -1
  84. package/lib/typescript/highlight-updates/components/RendersCopySettingsView.d.ts.map +0 -1
  85. package/lib/typescript/highlight-updates/components/StatsDisplay.d.ts.map +0 -1
  86. package/lib/typescript/highlight-updates/types/copySettings.d.ts.map +0 -1
  87. package/lib/typescript/highlight-updates/utils/CommitProfiler.d.ts.map +0 -1
  88. package/lib/typescript/highlight-updates/utils/HighlightUpdatesController.d.ts.map +0 -1
  89. package/lib/typescript/highlight-updates/utils/PerformanceLogger.d.ts.map +0 -1
  90. package/lib/typescript/highlight-updates/utils/ProfilerInterceptor.d.ts.map +0 -1
  91. package/lib/typescript/highlight-updates/utils/RenderCauseDetector.d.ts.map +0 -1
  92. package/lib/typescript/highlight-updates/utils/RenderTracker.d.ts.map +0 -1
  93. package/lib/typescript/highlight-updates/utils/ViewTypeMapper.d.ts.map +0 -1
  94. package/lib/typescript/highlight-updates/utils/copySettingsStorage.d.ts.map +0 -1
  95. package/lib/typescript/highlight-updates/utils/devtoolsComponentNames.d.ts.map +0 -1
  96. package/lib/typescript/highlight-updates/utils/namedComposite.d.ts.map +0 -1
  97. package/lib/typescript/highlight-updates/utils/ownStateChanged.d.ts.map +0 -1
  98. package/lib/typescript/highlight-updates/utils/rawEventEmitter.d.ts.map +0 -1
  99. package/lib/typescript/highlight-updates/utils/renderExportFormatter.d.ts.map +0 -1
  100. package/lib/typescript/highlight-updates/utils/rendersExportFormatter.d.ts.map +0 -1
  101. package/lib/typescript/highlight-updates/utils/screenElements.d.ts.map +0 -1
  102. package/lib/typescript/highlight-updates/utils/tapMatch.d.ts.map +0 -1
  103. package/lib/typescript/highlight-updates/utils/testIDs.d.ts.map +0 -1
  104. package/lib/typescript/highlight-updates/utils/touchCapture.d.ts.map +0 -1
  105. package/lib/typescript/index.d.ts.map +0 -1
  106. package/lib/typescript/preset.d.ts.map +0 -1
  107. package/lib/typescript/sync/highlightUpdatesSyncAdapter.d.ts.map +0 -1
@@ -1,278 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.createHighlightUpdatesModalTool = createHighlightUpdatesModalTool;
7
- exports.createHighlightUpdatesTool = createHighlightUpdatesTool;
8
- exports.highlightUpdatesPreset = exports.highlightUpdatesModalPreset = void 0;
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
11
- var _HighlightUpdatesController = _interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController"));
12
- var _HighlightUpdatesModal = require("./highlight-updates/components/HighlightUpdatesModal");
13
- var _jsxRuntime = require("react/jsx-runtime");
14
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
16
- /**
17
- * Pre-configured highlight updates tool for FloatingDevTools
18
- *
19
- * This preset provides standalone "Highlight updates when components render"
20
- * functionality. Tap the icon to toggle highlights on/off.
21
- *
22
- * The overlay is automatically rendered by FloatingDevTools when the
23
- * @buoy-gg/highlight-updates package is installed.
24
- *
25
- * Two presets available:
26
- * - highlightUpdatesPreset: Quick toggle (no modal)
27
- * - highlightUpdatesModalPreset: Full modal with filters and render list
28
- *
29
- * @example
30
- * ```tsx
31
- * import { highlightUpdatesPreset, highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
32
- *
33
- * // Toggle-only: Just tap to enable/disable highlighting
34
- * <FloatingDevTools apps={[highlightUpdatesPreset]} />
35
- *
36
- * // Modal: Opens interface with filters, render list, and controls
37
- * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
38
- * ```
39
- */
40
-
41
- /**
42
- * Icon component that changes color based on enabled state.
43
- *
44
- * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
45
- * This component MUST use useState and useEffect hooks to subscribe to the controller.
46
- * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
47
- * which allows hooks to work properly.
48
- *
49
- * If you remove the hooks or change this to read isEnabled() directly,
50
- * the icon color will NOT update when the toggle is pressed.
51
- */function HighlightIcon({
52
- size
53
- }) {
54
- const [enabled, setEnabled] = (0, _react.useState)(() => _HighlightUpdatesController.default.isEnabled());
55
- (0, _react.useEffect)(() => {
56
- const unsubscribe = _HighlightUpdatesController.default.subscribe(isEnabled => {
57
- setEnabled(isEnabled);
58
- });
59
- return unsubscribe;
60
- }, []);
61
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon, {
62
- size: size,
63
- color: enabled ? "#10b981" : "#6b7280"
64
- });
65
- }
66
-
67
- /**
68
- * Empty component for toggle-only tools (no modal needed)
69
- * The actual overlay is rendered by FloatingDevTools automatically
70
- */
71
- function EmptyComponent() {
72
- return null;
73
- }
74
-
75
- /**
76
- * Wrapper component for the modal that handles badge press navigation.
77
- * Registers a callback with the controller to receive badge press events
78
- * and passes the target nativeTag to the modal for deep linking.
79
- */
80
- function HighlightUpdatesModalWithBadgeNavigation(props) {
81
- const [targetNativeTag, setTargetNativeTag] = (0, _react.useState)(null);
82
-
83
- // Register badge press callback when modal is visible
84
- (0, _react.useEffect)(() => {
85
- if (props.visible) {
86
- // Register callback to handle badge presses
87
- _HighlightUpdatesController.default.setBadgePressCallback(nativeTag => {
88
- setTargetNativeTag(nativeTag);
89
- });
90
- }
91
- return () => {
92
- // Clear callback when modal is closed or unmounted
93
- if (!props.visible) {
94
- _HighlightUpdatesController.default.setBadgePressCallback(null);
95
- }
96
- };
97
- }, [props.visible]);
98
-
99
- // Clear the target after it's been handled
100
- const handleInitialNativeTagHandled = (0, _react.useCallback)(() => {
101
- setTargetNativeTag(null);
102
- }, []);
103
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightUpdatesModal.HighlightUpdatesModal, {
104
- ...props,
105
- initialNativeTag: targetNativeTag,
106
- onInitialNativeTagHandled: handleInitialNativeTagHandled
107
- });
108
- }
109
-
110
- /**
111
- * Pre-configured highlight updates tool for FloatingDevTools.
112
- * Tap the icon to toggle component render highlighting on/off.
113
- *
114
- * Features:
115
- * - Standalone implementation - no DevTools connection required
116
- * - Simple direct toggle (no modal)
117
- * - Icon changes color: gray when off, green when on
118
- * - Overlay auto-rendered by FloatingDevTools
119
- */
120
- const highlightUpdatesPreset = exports.highlightUpdatesPreset = {
121
- id: "highlight-updates",
122
- name: "TOGGLE HIGHLIGHT",
123
- description: "Toggle component render highlights",
124
- slot: "row",
125
- icon: HighlightIcon,
126
- component: EmptyComponent,
127
- props: {},
128
- launchMode: "toggle-only",
129
- onPress: () => {
130
- // Initialize on first press if not already initialized
131
- if (!_HighlightUpdatesController.default.isInitialized()) {
132
- _HighlightUpdatesController.default.initialize();
133
- }
134
- _HighlightUpdatesController.default.toggle();
135
- // Icon updates automatically via subscription in HighlightIcon component
136
- }
137
- };
138
-
139
- /**
140
- * Create a custom highlight updates tool configuration.
141
- * Use this if you want to override default settings.
142
- *
143
- * @example
144
- * ```tsx
145
- * import { createHighlightUpdatesTool } from '@buoy-gg/highlight-updates';
146
- *
147
- * const myHighlightTool = createHighlightUpdatesTool({
148
- * name: "RENDERS",
149
- * enabledColor: "#ec4899",
150
- * disabledColor: "#9ca3af",
151
- * autoInitialize: true,
152
- * });
153
- * ```
154
- */
155
- function createHighlightUpdatesTool(options) {
156
- const enabledColor = options?.enabledColor || "#10b981";
157
- const disabledColor = options?.disabledColor || "#6b7280";
158
-
159
- // Auto-initialize if requested
160
- if (options?.autoInitialize) {
161
- // Delay to allow DevTools to connect
162
- setTimeout(() => {
163
- _HighlightUpdatesController.default.initialize();
164
- }, 1000);
165
- }
166
-
167
- /**
168
- * Custom icon component with hooks - rendered as JSX component.
169
- *
170
- * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
171
- * This component MUST use useState and useEffect hooks to subscribe to the controller.
172
- * See the comment on HighlightIcon above for full explanation.
173
- */
174
- const CustomHighlightIcon = ({
175
- size
176
- }) => {
177
- const [enabled, setEnabled] = (0, _react.useState)(() => _HighlightUpdatesController.default.isEnabled());
178
- (0, _react.useEffect)(() => {
179
- const unsubscribe = _HighlightUpdatesController.default.subscribe(isEnabled => {
180
- setEnabled(isEnabled);
181
- });
182
- return unsubscribe;
183
- }, []);
184
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon, {
185
- size: size,
186
- color: enabled ? enabledColor : disabledColor
187
- });
188
- };
189
- return {
190
- id: options?.id || "highlight-updates",
191
- name: options?.name || "TOGGLE HIGHLIGHT",
192
- description: options?.description || "Toggle component render highlights",
193
- slot: "row",
194
- icon: CustomHighlightIcon,
195
- component: EmptyComponent,
196
- props: {},
197
- launchMode: "toggle-only",
198
- onPress: () => {
199
- // Initialize on first press if not already initialized
200
- if (!_HighlightUpdatesController.default.isInitialized()) {
201
- _HighlightUpdatesController.default.initialize();
202
- }
203
- _HighlightUpdatesController.default.toggle();
204
- // Icon updates automatically via subscription
205
- }
206
- };
207
- }
208
-
209
- /**
210
- * Modal preset for highlight updates tool.
211
- * Opens a full modal interface with:
212
- * - List of tracked component renders
213
- * - Start/Stop and Pause/Resume controls
214
- * - Clear button to reset render counts
215
- * - Search bar in navbar (expandable)
216
- * - Filter by viewType, testID, nativeID, componentName
217
- * - Tap overlay badge to jump to component detail view
218
- *
219
- * Use this preset when you want detailed render tracking and filtering.
220
- */
221
- const highlightUpdatesModalPreset = exports.highlightUpdatesModalPreset = {
222
- id: "highlight-updates-modal",
223
- name: "HIGHLIGHT",
224
- description: "View component render tracking modal",
225
- slot: "both",
226
- icon: ({
227
- size
228
- }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
229
- size: size
230
- }),
231
- component: HighlightUpdatesModalWithBadgeNavigation,
232
- props: {
233
- enableSharedModalDimensions: false
234
- }
235
- };
236
-
237
- /**
238
- * Create a custom highlight updates modal tool configuration.
239
- * Use this if you want to override default settings for the modal version.
240
- *
241
- * @example
242
- * ```tsx
243
- * import { createHighlightUpdatesModalTool } from '@buoy-gg/highlight-updates';
244
- *
245
- * const myRendersTool = createHighlightUpdatesModalTool({
246
- * name: "PROFILER",
247
- * enabledColor: "#8b5cf6",
248
- * disabledColor: "#9ca3af",
249
- * });
250
- * ```
251
- */
252
- function createHighlightUpdatesModalTool(options) {
253
- const enabledColor = options?.enabledColor || "#10b981";
254
- const disabledColor = options?.disabledColor || "#6b7280";
255
-
256
- // Auto-initialize if requested
257
- if (options?.autoInitialize) {
258
- setTimeout(() => {
259
- _HighlightUpdatesController.default.initialize();
260
- }, 1000);
261
- }
262
- return {
263
- id: options?.id || "highlight-updates-modal",
264
- name: options?.name || "HIGHLIGHT",
265
- description: options?.description || "View component render tracking modal",
266
- slot: "both",
267
- icon: ({
268
- size
269
- }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
270
- size: size,
271
- color: enabledColor
272
- }),
273
- component: HighlightUpdatesModalWithBadgeNavigation,
274
- props: {
275
- enableSharedModalDimensions: false
276
- }
277
- };
278
- }
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createHighlightUpdatesModalTool=createHighlightUpdatesModalTool,exports.createHighlightUpdatesTool=createHighlightUpdatesTool,exports.highlightUpdatesPreset=exports.highlightUpdatesModalPreset=void 0;var _react=_interopRequireWildcard(require("react")),_floatingToolsCore=require("@buoy-gg/floating-tools-core"),_HighlightUpdatesController=_interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController")),_HighlightUpdatesModal=require("./highlight-updates/components/HighlightUpdatesModal"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,a,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?o:i){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?l(n,t,a):n[t]=e[t]);return n})(e,t)}function HighlightIcon({size:e}){const[t,i]=(0,_react.useState)(()=>_HighlightUpdatesController.default.isEnabled());return(0,_react.useEffect)(()=>_HighlightUpdatesController.default.subscribe(e=>{i(e)}),[]),(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon,{size:e,color:t?"#10b981":"#6b7280"})}function EmptyComponent(){return null}function HighlightUpdatesModalWithBadgeNavigation(e){const[t,i]=(0,_react.useState)(null);(0,_react.useEffect)(()=>(e.visible&&_HighlightUpdatesController.default.setBadgePressCallback(e=>{i(e)}),()=>{e.visible||_HighlightUpdatesController.default.setBadgePressCallback(null)}),[e.visible]);const o=(0,_react.useCallback)(()=>{i(null)},[]);return(0,_jsxRuntime.jsx)(_HighlightUpdatesModal.HighlightUpdatesModal,{...e,initialNativeTag:t,onInitialNativeTagHandled:o})}const highlightUpdatesPreset=exports.highlightUpdatesPreset={id:"highlight-updates",name:"TOGGLE HIGHLIGHT",description:"Toggle component render highlights",slot:"row",icon:HighlightIcon,component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()}};function createHighlightUpdatesTool(e){const t=e?.enabledColor||"#10b981",i=e?.disabledColor||"#6b7280";return e?.autoInitialize&&setTimeout(()=>{_HighlightUpdatesController.default.initialize()},1e3),{id:e?.id||"highlight-updates",name:e?.name||"TOGGLE HIGHLIGHT",description:e?.description||"Toggle component render highlights",slot:"row",icon:({size:e})=>{const[o,l]=(0,_react.useState)(()=>_HighlightUpdatesController.default.isEnabled());return(0,_react.useEffect)(()=>_HighlightUpdatesController.default.subscribe(e=>{l(e)}),[]),(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon,{size:e,color:o?t:i})},component:EmptyComponent,props:{},launchMode:"toggle-only",onPress:()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()}}}const highlightUpdatesModalPreset=exports.highlightUpdatesModalPreset={id:"highlight-updates-modal",name:"HIGHLIGHT",description:"View component render tracking modal",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon,{size:e}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}};function createHighlightUpdatesModalTool(e){const t=e?.enabledColor||"#10b981";return e?.autoInitialize&&setTimeout(()=>{_HighlightUpdatesController.default.initialize()},1e3),{id:e?.id||"highlight-updates-modal",name:e?.name||"HIGHLIGHT",description:e?.description||"View component render tracking modal",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon,{size:e,color:t}),component:HighlightUpdatesModalWithBadgeNavigation,props:{enableSharedModalDimensions:!1}}}
@@ -1,235 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.highlightUpdatesSyncAdapter = void 0;
7
- var _HighlightUpdatesController = _interopRequireDefault(require("../highlight-updates/utils/HighlightUpdatesController"));
8
- var _RenderTracker = require("../highlight-updates/utils/RenderTracker");
9
- var _screenElements = require("../highlight-updates/utils/screenElements");
10
- var _touchCapture = require("../highlight-updates/utils/touchCapture");
11
- var _CommitProfiler = require("../highlight-updates/utils/CommitProfiler");
12
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
- function ensureInitialized() {
14
- if (!_HighlightUpdatesController.default.isInitialized()) {
15
- _HighlightUpdatesController.default.initialize();
16
- }
17
- }
18
- function toWireCause(cause) {
19
- if (!cause) return undefined;
20
- const {
21
- hookChanges: _hookChanges,
22
- ...rest
23
- } = cause;
24
- return rest;
25
- }
26
-
27
- /**
28
- * Wire-form render: keep identity + counts + last cause type, drop the
29
- * per-component history buffer (up to 20 events, and hook/prop snapshots
30
- * when those settings are on). Dashboards fetch history via getRenderDetail.
31
- */
32
- function toWireRender(render) {
33
- const {
34
- renderHistory,
35
- lastRenderCause,
36
- ...rest
37
- } = render;
38
- return {
39
- ...rest,
40
- lastRenderCause: toWireCause(lastRenderCause),
41
- historyCount: renderHistory?.length ?? 0
42
- };
43
- }
44
-
45
- /**
46
- * Deliberately serializes to test serializability, unlike the snapshot guards
47
- * elsewhere. This runs once per `getRenderDetail` — a user clicking one row —
48
- * not on the ~5x/sec snapshot, so there is no unbounded per-tick cost to
49
- * avoid. Probing with a size walk first would just traverse the whole render
50
- * before doing this anyway.
51
- */
52
- function jsonSafeRender(render) {
53
- try {
54
- JSON.stringify(render);
55
- return render;
56
- } catch {
57
- return {
58
- ...render,
59
- lastRenderCause: toWireCause(render.lastRenderCause),
60
- renderHistory: render.renderHistory?.map(event => ({
61
- ...event,
62
- capturedProps: undefined,
63
- capturedState: undefined,
64
- cause: toWireCause(event.cause) ?? event.cause
65
- }))
66
- };
67
- }
68
- }
69
-
70
- /**
71
- * Measurement window for automated callers (MCP `measure_renders`).
72
- *
73
- * Backed by CommitProfiler, NOT the RenderTracker that feeds the overlay, and
74
- * the difference is the whole point. RenderTracker tracks HOST VIEWS: ask it
75
- * why `DealRow` re-rendered and it answers about the native `View` inside it —
76
- * "props changed: accessibilityState, accessibilityValue" — which is true and
77
- * useless. CommitProfiler walks COMPOSITE fibers, so it answers about the
78
- * component you named: which of ITS props changed, whether they changed by
79
- * value or only by identity, and which parent dragged it along.
80
- *
81
- * It also touches none of the user's overlay state — no enabling, no clearing
82
- * counters someone was collecting, nothing drawn on screen. A measurement is
83
- * invisible.
84
- */
85
- function beginMeasurement() {
86
- if (!_CommitProfiler.CommitProfiler.isSupported()) {
87
- return {
88
- ok: false,
89
- reason: "render capture needs a dev build with the React DevTools hook available"
90
- };
91
- }
92
- _CommitProfiler.CommitProfiler.startCapture({
93
- detail: true
94
- });
95
- return {
96
- ok: true
97
- };
98
- }
99
- function endMeasurement() {
100
- return {
101
- summary: _CommitProfiler.CommitProfiler.stopCapture()
102
- };
103
- }
104
-
105
- /**
106
- * Sync adapter for the highlight-updates tool, consumed by
107
- * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
108
- * ToolSyncAdapter interface so this package doesn't need a dependency on it).
109
- *
110
- * The visual highlights draw on the DEVICE's UI, but the render-tracking
111
- * data (component list, render counts, causes, history) is plain data — the
112
- * snapshot carries it so the dashboard renders the real HighlightUpdatesModal
113
- * as a mirror. Mutations (toggle, freeze, clear, spotlight) come back as
114
- * actions and run on the device; spotlight even highlights the component on
115
- * the phone screen while browsing details from the desktop.
116
- *
117
- * v2: per-component `renderHistory` (and hook-change values on lastRenderCause)
118
- * stay on the device. Dashboards fetch them via `getRenderDetail`.
119
- */
120
- const highlightUpdatesSyncAdapter = exports.highlightUpdatesSyncAdapter = {
121
- // v3: beginMeasurement / endMeasurement — a CommitProfiler capture window
122
- // for automated callers, with per-component causes. Invisible to the user.
123
- version: 3,
124
- getSnapshot: () => ({
125
- enabled: _HighlightUpdatesController.default.isEnabled(),
126
- frozen: _HighlightUpdatesController.default.getFrozen(),
127
- // True while tracking but the visual boxes are hidden (screenshot tool).
128
- highlightsSuppressed: _HighlightUpdatesController.default.getHighlightsSuppressed(),
129
- renders: _RenderTracker.RenderTracker.getRenders().map(toWireRender),
130
- trackerState: _RenderTracker.RenderTracker.getState()
131
- }),
132
- subscribe: onChange => {
133
- const unsubscribeEnabled = _HighlightUpdatesController.default.subscribe(onChange);
134
- const unsubscribeFreeze = _HighlightUpdatesController.default.subscribeToFreeze(onChange);
135
- const unsubscribeRenders = _RenderTracker.RenderTracker.subscribe(onChange);
136
- const unsubscribeTrackerState = _RenderTracker.RenderTracker.subscribeToState(onChange);
137
- return () => {
138
- unsubscribeEnabled();
139
- unsubscribeFreeze();
140
- unsubscribeRenders();
141
- unsubscribeTrackerState();
142
- };
143
- },
144
- actions: {
145
- // Capture window for automated callers (MCP `measure_renders`). Pairs:
146
- // begin -> drive the UI -> end. `end` always restores.
147
- beginMeasurement: () => beginMeasurement(),
148
- endMeasurement: () => endMeasurement(),
149
- /**
150
- * On-demand detail: one component's real renderHistory + lastRenderCause
151
- * (including hookChanges). Wire-form snapshots omit those.
152
- */
153
- getRenderDetail: params => {
154
- const {
155
- nativeTag
156
- } = params ?? {};
157
- if (nativeTag == null) {
158
- return {
159
- found: false,
160
- reason: "missing nativeTag"
161
- };
162
- }
163
- const render = _RenderTracker.RenderTracker.getRender(String(nativeTag));
164
- if (!render) return {
165
- found: false,
166
- reason: "unknown nativeTag"
167
- };
168
- return {
169
- found: true,
170
- nativeTag,
171
- render: jsonSafeRender(render)
172
- };
173
- },
174
- toggle: () => {
175
- ensureInitialized();
176
- _HighlightUpdatesController.default.toggle();
177
- },
178
- setEnabled: params => {
179
- ensureInitialized();
180
- _HighlightUpdatesController.default.setEnabled(params.enabled);
181
- },
182
- toggleFreeze: () => {
183
- _HighlightUpdatesController.default.toggleFreeze();
184
- },
185
- clearRenderCounts: () => {
186
- _HighlightUpdatesController.default.clearRenderCounts();
187
- },
188
- setSpotlight: params => {
189
- _HighlightUpdatesController.default.setSpotlight(params.nativeTag);
190
- },
191
- // Resolve a component (by testID/nativeID/name/nativeTag) to a fresh
192
- // on-screen rectangle — best-effort scrolling it into view first — so the
193
- // desktop can crop a simulator screenshot to exactly that component. The
194
- // returned value (rect + scale + screen) flows back as the action result.
195
- locateComponent: params => {
196
- ensureInitialized();
197
- return _HighlightUpdatesController.default.locateComponent(params ?? {});
198
- },
199
- // Track + measure components WITHOUT drawing the highlight boxes, so the
200
- // desktop screenshot tool can locate components with no on-device overlay.
201
- setSilentTracking: params => {
202
- ensureInitialized();
203
- _HighlightUpdatesController.default.setSilentTracking(params.enabled ?? false);
204
- },
205
- // Walk the live fiber tree and return the current screen's meaningful /
206
- // interactive elements, each with normalized tap coordinates. Powers the
207
- // MCP `describe_screen` reader — no screenshot, no silent-tracking needed.
208
- describeScreen: () => (0, _screenElements.describeScreen)(),
209
- // Tap an element purely in JS: resolve it (by nativeTag / testID / query),
210
- // find the nearest onPress up its fiber chain, and invoke it with a
211
- // synthetic press event. Powers the MCP `tap_element` action.
212
- tapElement: params => (0, _screenElements.tapElement)(params ?? {}),
213
- // Block until an element is on screen (or gone), so a driver can act on a
214
- // screen that has finished loading instead of the skeleton that was there
215
- // when `navigate` returned. Same matcher `tapElement` ranks by.
216
- waitFor: params => (0, _screenElements.waitFor)(params ?? {}),
217
- // ── Touch capture: the recording half of tapElement ──────────────────
218
- // Observe what a HUMAN taps, named in the same vocabulary tapElement
219
- // searches by, so the Scenarios recorder can turn a real session into a
220
- // replayable macro. Lives here because this tool already owns the fiber
221
- // walk both halves need.
222
- startTouchCapture: () => (0, _touchCapture.startTouchCapture)(),
223
- stopTouchCapture: () => {
224
- (0, _touchCapture.stopTouchCapture)();
225
- return (0, _touchCapture.getTouchCaptureStatus)();
226
- },
227
- clearTouchCapture: () => {
228
- (0, _touchCapture.clearTouchCapture)();
229
- return {
230
- ok: true
231
- };
232
- },
233
- readTouchCapture: params => (0, _touchCapture.readTouchCapture)(params?.sinceSeq ?? 0)
234
- }
235
- };
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.highlightUpdatesSyncAdapter=void 0;var _HighlightUpdatesController=_interopRequireDefault(require("../highlight-updates/utils/HighlightUpdatesController")),_RenderTracker=require("../highlight-updates/utils/RenderTracker"),_screenElements=require("../highlight-updates/utils/screenElements"),_touchCapture=require("../highlight-updates/utils/touchCapture"),_CommitProfiler=require("../highlight-updates/utils/CommitProfiler");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function ensureInitialized(){_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize()}function toWireCause(e){if(!e)return;const{hookChanges:t,...r}=e;return r}function toWireRender(e){const{renderHistory:t,lastRenderCause:r,...n}=e;return{...n,lastRenderCause:toWireCause(r),historyCount:t?.length??0}}function jsonSafeRender(e){try{return JSON.stringify(e),e}catch{return{...e,lastRenderCause:toWireCause(e.lastRenderCause),renderHistory:e.renderHistory?.map(e=>({...e,capturedProps:void 0,capturedState:void 0,cause:toWireCause(e.cause)??e.cause}))}}}function beginMeasurement(){return _CommitProfiler.CommitProfiler.isSupported()?(_CommitProfiler.CommitProfiler.startCapture({detail:!0}),{ok:!0}):{ok:!1,reason:"render capture needs a dev build with the React DevTools hook available"}}function endMeasurement(){return{summary:_CommitProfiler.CommitProfiler.stopCapture()}}const highlightUpdatesSyncAdapter=exports.highlightUpdatesSyncAdapter={version:3,getSnapshot:()=>({enabled:_HighlightUpdatesController.default.isEnabled(),frozen:_HighlightUpdatesController.default.getFrozen(),highlightsSuppressed:_HighlightUpdatesController.default.getHighlightsSuppressed(),renders:_RenderTracker.RenderTracker.getRenders().map(toWireRender),trackerState:_RenderTracker.RenderTracker.getState()}),subscribe:e=>{const t=_HighlightUpdatesController.default.subscribe(e),r=_HighlightUpdatesController.default.subscribeToFreeze(e),n=_RenderTracker.RenderTracker.subscribe(e),i=_RenderTracker.RenderTracker.subscribeToState(e);return()=>{t(),r(),n(),i()}},actions:{beginMeasurement:()=>beginMeasurement(),endMeasurement:()=>endMeasurement(),getRenderDetail:e=>{const{nativeTag:t}=e??{};if(null==t)return{found:!1,reason:"missing nativeTag"};const r=_RenderTracker.RenderTracker.getRender(String(t));return r?{found:!0,nativeTag:t,render:jsonSafeRender(r)}:{found:!1,reason:"unknown nativeTag"}},toggle:()=>{ensureInitialized(),_HighlightUpdatesController.default.toggle()},setEnabled:e=>{ensureInitialized(),_HighlightUpdatesController.default.setEnabled(e.enabled)},toggleFreeze:()=>{_HighlightUpdatesController.default.toggleFreeze()},clearRenderCounts:()=>{_HighlightUpdatesController.default.clearRenderCounts()},setSpotlight:e=>{_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},locateComponent:e=>(ensureInitialized(),_HighlightUpdatesController.default.locateComponent(e??{})),setSilentTracking:e=>{ensureInitialized(),_HighlightUpdatesController.default.setSilentTracking(e.enabled??!1)},describeScreen:e=>(0,_screenElements.describeScreen)(e??{}),tapElement:e=>(0,_screenElements.tapElement)(e??{}),waitFor:e=>(0,_screenElements.waitFor)(e??{}),startTouchCapture:()=>(0,_touchCapture.startTouchCapture)(),stopTouchCapture:()=>((0,_touchCapture.stopTouchCapture)(),(0,_touchCapture.getTouchCaptureStatus)()),clearTouchCapture:()=>((0,_touchCapture.clearTouchCapture)(),{ok:!0}),readTouchCapture:e=>(0,_touchCapture.readTouchCapture)(e?.sinceSeq??0)}};