@buoy-gg/highlight-updates 3.0.1 → 3.0.2

package/lib/commonjs/index.js

@@ -1 +1,320 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"CAUSE_CONFIG",{enumerable:!0,get:function(){return _RenderCauseBadge.CAUSE_CONFIG}}),Object.defineProperty(exports,"COMPONENT_CAUSE_CONFIG",{enumerable:!0,get:function(){return _RenderCauseBadge.COMPONENT_CAUSE_CONFIG}}),Object.defineProperty(exports,"HighlightFilterView",{enumerable:!0,get:function(){return _HighlightFilterView.HighlightFilterView}}),Object.defineProperty(exports,"HighlightUpdatesController",{enumerable:!0,get:function(){return _HighlightUpdatesController.default}}),Object.defineProperty(exports,"HighlightUpdatesModal",{enumerable:!0,get:function(){return _HighlightUpdatesModal.HighlightUpdatesModal}}),Object.defineProperty(exports,"HighlightUpdatesOverlay",{enumerable:!0,get:function(){return _HighlightUpdatesOverlay.HighlightUpdatesOverlay}}),Object.defineProperty(exports,"PerformanceLogger",{enumerable:!0,get:function(){return _PerformanceLogger.PerformanceLogger}}),Object.defineProperty(exports,"RenderCauseBadge",{enumerable:!0,get:function(){return _RenderCauseBadge.RenderCauseBadge}}),Object.defineProperty(exports,"RenderDetailView",{enumerable:!0,get:function(){return _RenderDetailView.RenderDetailView}}),Object.defineProperty(exports,"RenderHistoryFooter",{enumerable:!0,get:function(){return _RenderHistoryViewer.RenderHistoryFooter}}),Object.defineProperty(exports,"RenderHistoryViewer",{enumerable:!0,get:function(){return _RenderHistoryViewer.RenderHistoryViewer}}),Object.defineProperty(exports,"RenderListItem",{enumerable:!0,get:function(){return _RenderListItem.RenderListItem}}),Object.defineProperty(exports,"RenderTracker",{enumerable:!0,get:function(){return _RenderTracker.RenderTracker}}),Object.defineProperty(exports,"TwoLevelCauseBadge",{enumerable:!0,get:function(){return _RenderCauseBadge.TwoLevelCauseBadge}}),Object.defineProperty(exports,"VIEW_TYPE_MAP",{enumerable:!0,get:function(){return _ViewTypeMapper.VIEW_TYPE_MAP}}),Object.defineProperty(exports,"capturePropsSnapshot",{enumerable:!0,get:function(){return _RenderCauseDetector.capturePropsSnapshot}}),Object.defineProperty(exports,"captureStateSnapshot",{enumerable:!0,get:function(){return _RenderCauseDetector.captureStateSnapshot}}),Object.defineProperty(exports,"clearRenderCauseState",{enumerable:!0,get:function(){return _RenderCauseDetector.clearRenderCauseState}}),Object.defineProperty(exports,"createHighlightUpdatesModalTool",{enumerable:!0,get:function(){return _preset.createHighlightUpdatesModalTool}}),Object.defineProperty(exports,"createHighlightUpdatesTool",{enumerable:!0,get:function(){return _preset.createHighlightUpdatesTool}}),Object.defineProperty(exports,"detectRenderCause",{enumerable:!0,get:function(){return _RenderCauseDetector.detectRenderCause}}),Object.defineProperty(exports,"disableProfilerLogging",{enumerable:!0,get:function(){return _ProfilerInterceptor.disableProfilerLogging}}),Object.defineProperty(exports,"enableProfilerLogging",{enumerable:!0,get:function(){return _ProfilerInterceptor.enableProfilerLogging}}),Object.defineProperty(exports,"generateRendersJson",{enumerable:!0,get:function(){return _renderExportFormatter.generateRendersJson}}),Object.defineProperty(exports,"getAllComponentNames",{enumerable:!0,get:function(){return _ViewTypeMapper.getAllComponentNames}}),Object.defineProperty(exports,"getAllNativeViewTypes",{enumerable:!0,get:function(){return _ViewTypeMapper.getAllNativeViewTypes}}),Object.defineProperty(exports,"getComponentDisplayName",{enumerable:!0,get:function(){return _ViewTypeMapper.getComponentDisplayName}}),Object.defineProperty(exports,"getNativeViewType",{enumerable:!0,get:function(){return _ViewTypeMapper.getNativeViewType}}),Object.defineProperty(exports,"getRenderCauseStats",{enumerable:!0,get:function(){return _RenderCauseDetector.getRenderCauseStats}}),Object.defineProperty(exports,"highlightUpdatesModalPreset",{enumerable:!0,get:function(){return _preset.highlightUpdatesModalPreset}}),Object.defineProperty(exports,"highlightUpdatesPreset",{enumerable:!0,get:function(){return _preset.highlightUpdatesPreset}}),Object.defineProperty(exports,"installProfilerInterceptor",{enumerable:!0,get:function(){return _ProfilerInterceptor.installProfilerInterceptor}}),Object.defineProperty(exports,"isInterceptorInstalled",{enumerable:!0,get:function(){return _ProfilerInterceptor.isInterceptorInstalled}}),Object.defineProperty(exports,"isKnownViewType",{enumerable:!0,get:function(){return _ViewTypeMapper.isKnownViewType}}),Object.defineProperty(exports,"isLoggingEnabled",{enumerable:!0,get:function(){return _ProfilerInterceptor.isLoggingEnabled}}),exports.onRenderEvent=void 0,Object.defineProperty(exports,"removeRenderCauseState",{enumerable:!0,get:function(){return _RenderCauseDetector.removeRenderCauseState}}),Object.defineProperty(exports,"safeCloneForHistory",{enumerable:!0,get:function(){return _RenderCauseDetector.safeCloneForHistory}}),Object.defineProperty(exports,"setComparisonCallback",{enumerable:!0,get:function(){return _ProfilerInterceptor.setComparisonCallback}}),Object.defineProperty(exports,"uninstallProfilerInterceptor",{enumerable:!0,get:function(){return _ProfilerInterceptor.uninstallProfilerInterceptor}});var _preset=require("./preset"),_HighlightUpdatesController=_interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController")),_HighlightUpdatesOverlay=require("./highlight-updates/HighlightUpdatesOverlay"),_ProfilerInterceptor=require("./highlight-updates/utils/ProfilerInterceptor"),_RenderTracker=require("./highlight-updates/utils/RenderTracker"),_RenderCauseDetector=require("./highlight-updates/utils/RenderCauseDetector"),_PerformanceLogger=require("./highlight-updates/utils/PerformanceLogger"),_ViewTypeMapper=require("./highlight-updates/utils/ViewTypeMapper"),_HighlightUpdatesModal=require("./highlight-updates/components/HighlightUpdatesModal"),_RenderListItem=require("./highlight-updates/components/RenderListItem"),_RenderDetailView=require("./highlight-updates/components/RenderDetailView"),_HighlightFilterView=require("./highlight-updates/components/HighlightFilterView"),_RenderCauseBadge=require("./highlight-updates/components/RenderCauseBadge"),_RenderHistoryViewer=require("./highlight-updates/components/RenderHistoryViewer"),_renderExportFormatter=require("./highlight-updates/utils/renderExportFormatter");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const onRenderEvent=e=>{const{RenderTracker:r}=require("./highlight-updates/utils/RenderTracker");return r.onRenderEvent(e)};exports.onRenderEvent=onRenderEvent;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CAUSE_CONFIG", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseBadge.CAUSE_CONFIG;
+  }
+});
+Object.defineProperty(exports, "COMPONENT_CAUSE_CONFIG", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseBadge.COMPONENT_CAUSE_CONFIG;
+  }
+});
+Object.defineProperty(exports, "HighlightFilterView", {
+  enumerable: true,
+  get: function () {
+    return _HighlightFilterView.HighlightFilterView;
+  }
+});
+Object.defineProperty(exports, "HighlightUpdatesController", {
+  enumerable: true,
+  get: function () {
+    return _HighlightUpdatesController.default;
+  }
+});
+Object.defineProperty(exports, "HighlightUpdatesModal", {
+  enumerable: true,
+  get: function () {
+    return _HighlightUpdatesModal.HighlightUpdatesModal;
+  }
+});
+Object.defineProperty(exports, "HighlightUpdatesOverlay", {
+  enumerable: true,
+  get: function () {
+    return _HighlightUpdatesOverlay.HighlightUpdatesOverlay;
+  }
+});
+Object.defineProperty(exports, "PerformanceLogger", {
+  enumerable: true,
+  get: function () {
+    return _PerformanceLogger.PerformanceLogger;
+  }
+});
+Object.defineProperty(exports, "RenderCauseBadge", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseBadge.RenderCauseBadge;
+  }
+});
+Object.defineProperty(exports, "RenderDetailView", {
+  enumerable: true,
+  get: function () {
+    return _RenderDetailView.RenderDetailView;
+  }
+});
+Object.defineProperty(exports, "RenderHistoryFooter", {
+  enumerable: true,
+  get: function () {
+    return _RenderHistoryViewer.RenderHistoryFooter;
+  }
+});
+Object.defineProperty(exports, "RenderHistoryViewer", {
+  enumerable: true,
+  get: function () {
+    return _RenderHistoryViewer.RenderHistoryViewer;
+  }
+});
+Object.defineProperty(exports, "RenderListItem", {
+  enumerable: true,
+  get: function () {
+    return _RenderListItem.RenderListItem;
+  }
+});
+Object.defineProperty(exports, "RenderTracker", {
+  enumerable: true,
+  get: function () {
+    return _RenderTracker.RenderTracker;
+  }
+});
+Object.defineProperty(exports, "TwoLevelCauseBadge", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseBadge.TwoLevelCauseBadge;
+  }
+});
+Object.defineProperty(exports, "VIEW_TYPE_MAP", {
+  enumerable: true,
+  get: function () {
+    return _ViewTypeMapper.VIEW_TYPE_MAP;
+  }
+});
+Object.defineProperty(exports, "capturePropsSnapshot", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.capturePropsSnapshot;
+  }
+});
+Object.defineProperty(exports, "captureStateSnapshot", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.captureStateSnapshot;
+  }
+});
+Object.defineProperty(exports, "clearRenderCauseState", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.clearRenderCauseState;
+  }
+});
+Object.defineProperty(exports, "createHighlightUpdatesModalTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createHighlightUpdatesModalTool;
+  }
+});
+Object.defineProperty(exports, "createHighlightUpdatesTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createHighlightUpdatesTool;
+  }
+});
+Object.defineProperty(exports, "detectRenderCause", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.detectRenderCause;
+  }
+});
+Object.defineProperty(exports, "disableProfilerLogging", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.disableProfilerLogging;
+  }
+});
+Object.defineProperty(exports, "enableProfilerLogging", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.enableProfilerLogging;
+  }
+});
+Object.defineProperty(exports, "generateRendersJson", {
+  enumerable: true,
+  get: function () {
+    return _renderExportFormatter.generateRendersJson;
+  }
+});
+Object.defineProperty(exports, "getAllComponentNames", {
+  enumerable: true,
+  get: function () {
+    return _ViewTypeMapper.getAllComponentNames;
+  }
+});
+Object.defineProperty(exports, "getAllNativeViewTypes", {
+  enumerable: true,
+  get: function () {
+    return _ViewTypeMapper.getAllNativeViewTypes;
+  }
+});
+Object.defineProperty(exports, "getComponentDisplayName", {
+  enumerable: true,
+  get: function () {
+    return _ViewTypeMapper.getComponentDisplayName;
+  }
+});
+Object.defineProperty(exports, "getNativeViewType", {
+  enumerable: true,
+  get: function () {
+    return _ViewTypeMapper.getNativeViewType;
+  }
+});
+Object.defineProperty(exports, "getRenderCauseStats", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.getRenderCauseStats;
+  }
+});
+Object.defineProperty(exports, "highlightUpdatesModalPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.highlightUpdatesModalPreset;
+  }
+});
+Object.defineProperty(exports, "highlightUpdatesPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.highlightUpdatesPreset;
+  }
+});
+Object.defineProperty(exports, "highlightUpdatesSyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _highlightUpdatesSyncAdapter.highlightUpdatesSyncAdapter;
+  }
+});
+Object.defineProperty(exports, "installProfilerInterceptor", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.installProfilerInterceptor;
+  }
+});
+Object.defineProperty(exports, "isInterceptorInstalled", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.isInterceptorInstalled;
+  }
+});
+Object.defineProperty(exports, "isKnownViewType", {
+  enumerable: true,
+  get: function () {
+    return _ViewTypeMapper.isKnownViewType;
+  }
+});
+Object.defineProperty(exports, "isLoggingEnabled", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.isLoggingEnabled;
+  }
+});
+exports.onRenderEvent = void 0;
+Object.defineProperty(exports, "removeRenderCauseState", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.removeRenderCauseState;
+  }
+});
+Object.defineProperty(exports, "safeCloneForHistory", {
+  enumerable: true,
+  get: function () {
+    return _RenderCauseDetector.safeCloneForHistory;
+  }
+});
+Object.defineProperty(exports, "setComparisonCallback", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.setComparisonCallback;
+  }
+});
+Object.defineProperty(exports, "uninstallProfilerInterceptor", {
+  enumerable: true,
+  get: function () {
+    return _ProfilerInterceptor.uninstallProfilerInterceptor;
+  }
+});
+var _preset = require("./preset");
+var _HighlightUpdatesController = _interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController"));
+var _highlightUpdatesSyncAdapter = require("./sync/highlightUpdatesSyncAdapter");
+var _HighlightUpdatesOverlay = require("./highlight-updates/HighlightUpdatesOverlay");
+var _ProfilerInterceptor = require("./highlight-updates/utils/ProfilerInterceptor");
+var _RenderTracker = require("./highlight-updates/utils/RenderTracker");
+var _RenderCauseDetector = require("./highlight-updates/utils/RenderCauseDetector");
+var _PerformanceLogger = require("./highlight-updates/utils/PerformanceLogger");
+var _ViewTypeMapper = require("./highlight-updates/utils/ViewTypeMapper");
+var _HighlightUpdatesModal = require("./highlight-updates/components/HighlightUpdatesModal");
+var _RenderListItem = require("./highlight-updates/components/RenderListItem");
+var _RenderDetailView = require("./highlight-updates/components/RenderDetailView");
+var _HighlightFilterView = require("./highlight-updates/components/HighlightFilterView");
+var _RenderCauseBadge = require("./highlight-updates/components/RenderCauseBadge");
+var _RenderHistoryViewer = require("./highlight-updates/components/RenderHistoryViewer");
+var _renderExportFormatter = require("./highlight-updates/utils/renderExportFormatter");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @buoy-gg/highlight-updates
+ *
+ * Standalone implementation of React DevTools' "Highlight updates when components
+ * render" feature. Works without requiring DevTools to be connected.
+ *
+ * @example
+ * ```tsx
+ * // Toggle-only preset - tap to enable/disable highlights
+ * import { highlightUpdatesPreset } from '@buoy-gg/highlight-updates';
+ *
+ * <FloatingDevTools apps={[highlightUpdatesPreset]} />
+ *
+ * // Modal preset - full interface with filters and render list
+ * import { highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
+ *
+ * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
+ *
+ * // Or use the standalone controller programmatically
+ * import { HighlightUpdatesController } from '@buoy-gg/highlight-updates';
+ *
+ * HighlightUpdatesController.toggle();
+ * HighlightUpdatesController.enable();
+ * HighlightUpdatesController.disable();
+ * ```
+ */
+
+// Preset exports for FloatingDevTools integration
+
+// Controller export for standalone usage
+
+// External sync (adapter for @buoy-gg/external-sync's useExternalSync)
+
+// Overlay component - auto-rendered by FloatingDevTools, but exported for manual usage
+
+// Profiler interceptor for debugging - captures what DevTools detects
+
+// RenderTracker singleton for tracking render history
+
+// Convenience export for unified events integration
+const onRenderEvent = callback => {
+  const {
+    RenderTracker
+  } = require("./highlight-updates/utils/RenderTracker");
+  return RenderTracker.onRenderEvent(callback);
+};
+
+// RenderCauseDetector for detecting why components rendered
+
+// PerformanceLogger for performance measurement and debugging
+
+// ViewTypeMapper for translating native view names to component names
+
+// Modal components for custom integrations
+
+// Simple JSON export for renders
+exports.onRenderEvent = onRenderEvent;

package/lib/commonjs/preset.js

@@ -1 +1,278 @@
-"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}}}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHighlightUpdatesModalTool = createHighlightUpdatesModalTool;
+exports.createHighlightUpdatesTool = createHighlightUpdatesTool;
+exports.highlightUpdatesPreset = exports.highlightUpdatesModalPreset = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _HighlightUpdatesController = _interopRequireDefault(require("./highlight-updates/utils/HighlightUpdatesController"));
+var _HighlightUpdatesModal = require("./highlight-updates/components/HighlightUpdatesModal");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+/**
+ * Pre-configured highlight updates tool for FloatingDevTools
+ *
+ * This preset provides standalone "Highlight updates when components render"
+ * functionality. Tap the icon to toggle highlights on/off.
+ *
+ * The overlay is automatically rendered by FloatingDevTools when the
+ * @buoy-gg/highlight-updates package is installed.
+ *
+ * Two presets available:
+ * - highlightUpdatesPreset: Quick toggle (no modal)
+ * - highlightUpdatesModalPreset: Full modal with filters and render list
+ *
+ * @example
+ * ```tsx
+ * import { highlightUpdatesPreset, highlightUpdatesModalPreset } from '@buoy-gg/highlight-updates';
+ *
+ * // Toggle-only: Just tap to enable/disable highlighting
+ * <FloatingDevTools apps={[highlightUpdatesPreset]} />
+ *
+ * // Modal: Opens interface with filters, render list, and controls
+ * <FloatingDevTools apps={[highlightUpdatesModalPreset]} />
+ * ```
+ */
+
+/**
+ * Icon component that changes color based on enabled state.
+ *
+ * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+ * This component MUST use useState and useEffect hooks to subscribe to the controller.
+ * It is rendered as a JSX component (<IconComponent />) in FloatingMenu and DialIcon,
+ * which allows hooks to work properly.
+ *
+ * If you remove the hooks or change this to read isEnabled() directly,
+ * the icon color will NOT update when the toggle is pressed.
+ */function HighlightIcon({
+  size
+}) {
+  const [enabled, setEnabled] = (0, _react.useState)(() => _HighlightUpdatesController.default.isEnabled());
+  (0, _react.useEffect)(() => {
+    const unsubscribe = _HighlightUpdatesController.default.subscribe(isEnabled => {
+      setEnabled(isEnabled);
+    });
+    return unsubscribe;
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon, {
+    size: size,
+    color: enabled ? "#10b981" : "#6b7280"
+  });
+}
+
+/**
+ * Empty component for toggle-only tools (no modal needed)
+ * The actual overlay is rendered by FloatingDevTools automatically
+ */
+function EmptyComponent() {
+  return null;
+}
+
+/**
+ * Wrapper component for the modal that handles badge press navigation.
+ * Registers a callback with the controller to receive badge press events
+ * and passes the target nativeTag to the modal for deep linking.
+ */
+function HighlightUpdatesModalWithBadgeNavigation(props) {
+  const [targetNativeTag, setTargetNativeTag] = (0, _react.useState)(null);
+
+  // Register badge press callback when modal is visible
+  (0, _react.useEffect)(() => {
+    if (props.visible) {
+      // Register callback to handle badge presses
+      _HighlightUpdatesController.default.setBadgePressCallback(nativeTag => {
+        setTargetNativeTag(nativeTag);
+      });
+    }
+    return () => {
+      // Clear callback when modal is closed or unmounted
+      if (!props.visible) {
+        _HighlightUpdatesController.default.setBadgePressCallback(null);
+      }
+    };
+  }, [props.visible]);
+
+  // Clear the target after it's been handled
+  const handleInitialNativeTagHandled = (0, _react.useCallback)(() => {
+    setTargetNativeTag(null);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightUpdatesModal.HighlightUpdatesModal, {
+    ...props,
+    initialNativeTag: targetNativeTag,
+    onInitialNativeTagHandled: handleInitialNativeTagHandled
+  });
+}
+
+/**
+ * Pre-configured highlight updates tool for FloatingDevTools.
+ * Tap the icon to toggle component render highlighting on/off.
+ *
+ * Features:
+ * - Standalone implementation - no DevTools connection required
+ * - Simple direct toggle (no modal)
+ * - Icon changes color: gray when off, green when on
+ * - Overlay auto-rendered by FloatingDevTools
+ */
+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: () => {
+    // Initialize on first press if not already initialized
+    if (!_HighlightUpdatesController.default.isInitialized()) {
+      _HighlightUpdatesController.default.initialize();
+    }
+    _HighlightUpdatesController.default.toggle();
+    // Icon updates automatically via subscription in HighlightIcon component
+  }
+};
+
+/**
+ * Create a custom highlight updates tool configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createHighlightUpdatesTool } from '@buoy-gg/highlight-updates';
+ *
+ * const myHighlightTool = createHighlightUpdatesTool({
+ *   name: "RENDERS",
+ *   enabledColor: "#ec4899",
+ *   disabledColor: "#9ca3af",
+ *   autoInitialize: true,
+ * });
+ * ```
+ */
+function createHighlightUpdatesTool(options) {
+  const enabledColor = options?.enabledColor || "#10b981";
+  const disabledColor = options?.disabledColor || "#6b7280";
+
+  // Auto-initialize if requested
+  if (options?.autoInitialize) {
+    // Delay to allow DevTools to connect
+    setTimeout(() => {
+      _HighlightUpdatesController.default.initialize();
+    }, 1000);
+  }
+
+  /**
+   * Custom icon component with hooks - rendered as JSX component.
+   *
+   * ⚠️ IMPORTANT - DO NOT MODIFY THIS COMPONENT ⚠️
+   * This component MUST use useState and useEffect hooks to subscribe to the controller.
+   * See the comment on HighlightIcon above for full explanation.
+   */
+  const CustomHighlightIcon = ({
+    size
+  }) => {
+    const [enabled, setEnabled] = (0, _react.useState)(() => _HighlightUpdatesController.default.isEnabled());
+    (0, _react.useEffect)(() => {
+      const unsubscribe = _HighlightUpdatesController.default.subscribe(isEnabled => {
+        setEnabled(isEnabled);
+      });
+      return unsubscribe;
+    }, []);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlightIcon, {
+      size: size,
+      color: enabled ? enabledColor : disabledColor
+    });
+  };
+  return {
+    id: options?.id || "highlight-updates",
+    name: options?.name || "TOGGLE HIGHLIGHT",
+    description: options?.description || "Toggle component render highlights",
+    slot: "row",
+    icon: CustomHighlightIcon,
+    component: EmptyComponent,
+    props: {},
+    launchMode: "toggle-only",
+    onPress: () => {
+      // Initialize on first press if not already initialized
+      if (!_HighlightUpdatesController.default.isInitialized()) {
+        _HighlightUpdatesController.default.initialize();
+      }
+      _HighlightUpdatesController.default.toggle();
+      // Icon updates automatically via subscription
+    }
+  };
+}
+
+/**
+ * Modal preset for highlight updates tool.
+ * Opens a full modal interface with:
+ * - List of tracked component renders
+ * - Start/Stop and Pause/Resume controls
+ * - Clear button to reset render counts
+ * - Search bar in navbar (expandable)
+ * - Filter by viewType, testID, nativeID, componentName
+ * - Tap overlay badge to jump to component detail view
+ *
+ * Use this preset when you want detailed render tracking and filtering.
+ */
+const highlightUpdatesModalPreset = exports.highlightUpdatesModalPreset = {
+  id: "highlight-updates-modal",
+  name: "HIGHLIGHT",
+  description: "View component render tracking modal",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
+    size: size
+  }),
+  component: HighlightUpdatesModalWithBadgeNavigation,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom highlight updates modal tool configuration.
+ * Use this if you want to override default settings for the modal version.
+ *
+ * @example
+ * ```tsx
+ * import { createHighlightUpdatesModalTool } from '@buoy-gg/highlight-updates';
+ *
+ * const myRendersTool = createHighlightUpdatesModalTool({
+ *   name: "PROFILER",
+ *   enabledColor: "#8b5cf6",
+ *   disabledColor: "#9ca3af",
+ * });
+ * ```
+ */
+function createHighlightUpdatesModalTool(options) {
+  const enabledColor = options?.enabledColor || "#10b981";
+  const disabledColor = options?.disabledColor || "#6b7280";
+
+  // Auto-initialize if requested
+  if (options?.autoInitialize) {
+    setTimeout(() => {
+      _HighlightUpdatesController.default.initialize();
+    }, 1000);
+  }
+  return {
+    id: options?.id || "highlight-updates-modal",
+    name: options?.name || "HIGHLIGHT",
+    description: options?.description || "View component render tracking modal",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.HighlighterIcon, {
+      size: size,
+      color: enabledColor
+    }),
+    component: HighlightUpdatesModalWithBadgeNavigation,
+    props: {
+      enableSharedModalDimensions: false
+    }
+  };
+}