@buoy-gg/highlight-updates 2.1.11 → 2.1.13

package/lib/commonjs/preset.js

@@ -1,278 +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
-    }
-  };
-}
+"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}}}

package/lib/module/highlight-updates/HighlightUpdatesOverlay.js

@@ -1,278 +1 @@
-"use strict";
-
-/**
- * HighlightUpdatesOverlay
- *
- * Renders colored highlight rectangles for components that have updated.
- * Uses View-based rendering (similar to debug-borders) instead of the
- * native DebuggingOverlay component for better compatibility.
- */
-
-import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
-import HighlightUpdatesController from "./utils/HighlightUpdatesController";
-import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
-import { RenderTracker } from "./utils/RenderTracker";
-
-// Declare performance API available in React Native's JavaScript environment
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// How long highlights stay visible (ms)
-const HIGHLIGHT_DURATION = 1000;
-export function HighlightUpdatesOverlay({
-  onBadgePress
-} = {}) {
-  const [highlights, setHighlights] = useState([]);
-  const [isFrozen, setIsFrozen] = useState(() => HighlightUpdatesController.getFrozen());
-  const [spotlightTag, setSpotlightTag] = useState(null);
-  const cleanupTimerRef = useRef(null);
-  const renderStartTimeRef = useRef(0);
-  const highlightCountRef = useRef(0);
-  const frozenRef = useRef(isFrozen);
-
-  // Keep ref in sync with state for use in interval callback
-  frozenRef.current = isFrozen;
-
-  // Track render start time
-  if (PerformanceLogger.isEnabled()) {
-    renderStartTimeRef.current = performance.now();
-    highlightCountRef.current = highlights.length;
-  }
-
-  // Measure render completion time using useLayoutEffect (runs after DOM mutations)
-  useLayoutEffect(() => {
-    if (PerformanceLogger.isEnabled() && renderStartTimeRef.current > 0 && highlightCountRef.current > 0) {
-      const renderTime = performance.now() - renderStartTimeRef.current;
-      // Mark end-to-end timing (for benchmark recording only - no console logs)
-      markOverlayRendered(highlightCountRef.current, renderTime);
-    }
-  });
-
-  // Subscribe to freeze state changes
-  useEffect(() => {
-    const unsubscribe = HighlightUpdatesController.subscribeToFreeze(frozen => {
-      setIsFrozen(frozen);
-    });
-    return unsubscribe;
-  }, []);
-
-  // Subscribe to filter changes - refresh frozen highlights when filters change
-  useEffect(() => {
-    const unsubscribe = RenderTracker.subscribeToFilters(() => {
-      // When filters change, filter out highlights that no longer match
-      setHighlights(prev => {
-        return prev.filter(highlight => {
-          // Look up the render by nativeTag
-          const render = RenderTracker.getRender(String(highlight.id));
-          if (!render) {
-            // If render not found, keep the highlight (it might be from a different source)
-            return true;
-          }
-          // Check if the render should still be shown based on new filters
-          return RenderTracker.shouldShowRender(render);
-        });
-      });
-    });
-    return unsubscribe;
-  }, []);
-
-  // Subscribe to spotlight changes - show which component is being viewed in detail
-  useEffect(() => {
-    HighlightUpdatesController.setSpotlightCallback(tag => {
-      setSpotlightTag(tag);
-    });
-    return () => {
-      HighlightUpdatesController.setSpotlightCallback(null);
-    };
-  }, []);
-
-  // Callback to add new highlights
-  const addHighlights = useCallback(newRects => {
-    const now = Date.now();
-    const timestampedRects = newRects.map(rect => ({
-      ...rect,
-      timestamp: now
-    }));
-    setHighlights(prev => {
-      // Merge new highlights, replacing any with same id
-      const updated = [...prev];
-      for (const newRect of timestampedRects) {
-        const existingIndex = updated.findIndex(r => r.id === newRect.id);
-        if (existingIndex >= 0) {
-          updated[existingIndex] = newRect;
-        } else {
-          updated.push(newRect);
-        }
-      }
-      return updated;
-    });
-  }, []);
-
-  // Register the callback with the controller
-  useEffect(() => {
-    HighlightUpdatesController.setHighlightCallback(addHighlights);
-
-    // Cleanup timer to remove old highlights
-    // When frozen, skip cleanup to keep highlights visible indefinitely
-    cleanupTimerRef.current = setInterval(() => {
-      // Check frozen state via ref (doesn't cause re-subscription)
-      if (frozenRef.current) {
-        return; // Skip cleanup when frozen
-      }
-      const now = Date.now();
-      setHighlights(prev => prev.filter(rect => now - rect.timestamp < HIGHLIGHT_DURATION));
-    }, 50);
-    return () => {
-      HighlightUpdatesController.setHighlightCallback(null);
-      if (cleanupTimerRef.current) {
-        clearInterval(cleanupTimerRef.current);
-      }
-    };
-  }, [addHighlights]);
-
-  // Check if badge press handling is enabled (via props or controller)
-  const hasBadgePressHandler = onBadgePress || HighlightUpdatesController.getBadgePressCallback();
-
-  // Handle badge press - navigate to detail view for this component
-  const handleBadgePress = useCallback(nativeTag => {
-    // First try the prop callback
-    if (onBadgePress) {
-      onBadgePress(nativeTag);
-    } else {
-      // Fall back to controller callback
-      HighlightUpdatesController.handleBadgePress(nativeTag);
-    }
-  }, [onBadgePress]);
-
-  // Get spotlight render info if we have a spotlight active
-  const spotlightRender = spotlightTag ? RenderTracker.getRender(String(spotlightTag)) : null;
-
-  // Render nothing if no highlights and no spotlight
-  if (highlights.length === 0 && !spotlightRender?.measurements) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.overlay,
-    pointerEvents: "box-none",
-    nativeID: "highlight-updates-overlay",
-    children: [spotlightRender?.measurements && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        nativeID: "__spotlight_highlight__",
-        style: [styles.spotlightHighlight, {
-          // Offset by border width so border renders outside the component bounds
-          left: spotlightRender.measurements.x - 3,
-          top: spotlightRender.measurements.y - 3,
-          width: spotlightRender.measurements.width + 6,
-          height: spotlightRender.measurements.height + 6
-        }]
-      }), /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: [styles.spotlightLabel, {
-          left: spotlightRender.measurements.x,
-          top: spotlightRender.measurements.y + spotlightRender.measurements.height + 4
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.spotlightLabelText,
-          children: spotlightRender.componentName || spotlightRender.displayName || spotlightRender.viewType
-        })
-      })]
-    }), highlights.map(rect => /*#__PURE__*/_jsx(View, {
-      pointerEvents: "box-none",
-      nativeID: `__highlight_rect_${rect.id}__`,
-      style: [styles.highlight, {
-        left: rect.x,
-        top: rect.y,
-        width: rect.width,
-        height: rect.height,
-        borderColor: rect.color
-      }],
-      children: rect.count > 0 && (hasBadgePressHandler ? /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => handleBadgePress(rect.id),
-        style: [styles.badge, {
-          backgroundColor: rect.color
-        }],
-        activeOpacity: 0.7,
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 8,
-          right: 8
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.badgeText,
-          nativeID: `__highlight_text_${rect.id}__`,
-          children: rect.count
-        })
-      }) : /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          backgroundColor: rect.color
-        }],
-        nativeID: `__highlight_badge_${rect.id}__`,
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.badgeText,
-          nativeID: `__highlight_text_${rect.id}__`,
-          children: rect.count
-        })
-      }))
-    }, `highlight-${rect.id}`))]
-  });
-}
-const styles = StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 999999,
-    elevation: 999999,
-    borderWidth: 0
-  },
-  highlight: {
-    position: "absolute",
-    borderWidth: 2,
-    borderStyle: "solid",
-    backgroundColor: "transparent"
-  },
-  badge: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    height: 14,
-    borderRadius: 0,
-    justifyContent: "center",
-    alignItems: "center",
-    paddingHorizontal: 2
-  },
-  badgeText: {
-    color: "#000",
-    fontSize: 9,
-    fontWeight: "bold"
-  },
-  // Spotlight highlight styles
-  spotlightHighlight: {
-    position: "absolute",
-    borderWidth: 2,
-    borderStyle: "dashed",
-    borderColor: buoyColors.primary,
-    backgroundColor: "transparent"
-  },
-  spotlightLabel: {
-    position: "absolute",
-    backgroundColor: buoyColors.card,
-    borderWidth: 1,
-    borderColor: buoyColors.primary,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  spotlightLabelText: {
-    color: buoyColors.primary,
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  }
-});
-export default HighlightUpdatesOverlay;
+"use strict";import React,{useEffect,useState,useRef,useCallback,useLayoutEffect}from"react";import{View,Text,StyleSheet,TouchableOpacity}from"react-native";import{buoyColors}from"@buoy-gg/shared-ui";import HighlightUpdatesController from"./utils/HighlightUpdatesController";import{PerformanceLogger,markOverlayRendered}from"./utils/PerformanceLogger";import{RenderTracker}from"./utils/RenderTracker";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const HIGHLIGHT_DURATION=1e3;export function HighlightUpdatesOverlay({onBadgePress:e}={}){const[t,r]=useState([]),[o,l]=useState(()=>HighlightUpdatesController.getFrozen()),[s,i]=useState(null),n=useRef(null),a=useRef(0),h=useRef(0),g=useRef(o);g.current=o,PerformanceLogger.isEnabled()&&(a.current=performance.now(),h.current=t.length),useLayoutEffect(()=>{if(PerformanceLogger.isEnabled()&&a.current>0&&h.current>0){const e=performance.now()-a.current;markOverlayRendered(h.current,e)}}),useEffect(()=>HighlightUpdatesController.subscribeToFreeze(e=>{l(e)}),[]),useEffect(()=>RenderTracker.subscribeToFilters(()=>{r(e=>e.filter(e=>{const t=RenderTracker.getRender(String(e.id));return!t||RenderTracker.shouldShowRender(t)}))}),[]),useEffect(()=>(HighlightUpdatesController.setSpotlightCallback(e=>{i(e)}),()=>{HighlightUpdatesController.setSpotlightCallback(null)}),[]);const d=useCallback(e=>{const t=Date.now(),o=e.map(e=>({...e,timestamp:t}));r(e=>{const t=[...e];for(const e of o){const r=t.findIndex(t=>t.id===e.id);r>=0?t[r]=e:t.push(e)}return t})},[]);useEffect(()=>(HighlightUpdatesController.setHighlightCallback(d),n.current=setInterval(()=>{if(g.current)return;const e=Date.now();r(t=>t.filter(t=>e-t.timestamp<1e3))},50),()=>{HighlightUpdatesController.setHighlightCallback(null),n.current&&clearInterval(n.current)}),[d]);const c=e||HighlightUpdatesController.getBadgePressCallback(),u=useCallback(t=>{e?e(t):HighlightUpdatesController.handleBadgePress(t)},[e]),p=s?RenderTracker.getRender(String(s)):null;return 0!==t.length||p?.measurements?_jsxs(View,{style:styles.overlay,pointerEvents:"box-none",nativeID:"highlight-updates-overlay",children:[p?.measurements&&_jsxs(_Fragment,{children:[_jsx(View,{pointerEvents:"none",nativeID:"__spotlight_highlight__",style:[styles.spotlightHighlight,{left:p.measurements.x-3,top:p.measurements.y-3,width:p.measurements.width+6,height:p.measurements.height+6}]}),_jsx(View,{pointerEvents:"none",style:[styles.spotlightLabel,{left:p.measurements.x,top:p.measurements.y+p.measurements.height+4}],children:_jsx(Text,{style:styles.spotlightLabelText,children:p.componentName||p.displayName||p.viewType})})]}),t.map(e=>_jsx(View,{pointerEvents:"box-none",nativeID:`__highlight_rect_${e.id}__`,style:[styles.highlight,{left:e.x,top:e.y,width:e.width,height:e.height,borderColor:e.color}],children:e.count>0&&(c?_jsx(TouchableOpacity,{onPress:()=>u(e.id),style:[styles.badge,{backgroundColor:e.color}],activeOpacity:.7,hitSlop:{top:8,bottom:8,left:8,right:8},children:_jsx(Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})}):_jsx(View,{style:[styles.badge,{backgroundColor:e.color}],nativeID:`__highlight_badge_${e.id}__`,pointerEvents:"none",children:_jsx(Text,{style:styles.badgeText,nativeID:`__highlight_text_${e.id}__`,children:e.count})}))},`highlight-${e.id}`))]}):null}const styles=StyleSheet.create({overlay:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:999999,elevation:999999,borderWidth:0},highlight:{position:"absolute",borderWidth:2,borderStyle:"solid",backgroundColor:"transparent"},badge:{position:"absolute",top:0,right:0,height:14,borderRadius:0,justifyContent:"center",alignItems:"center",paddingHorizontal:2},badgeText:{color:"#000",fontSize:9,fontWeight:"bold"},spotlightHighlight:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:buoyColors.primary,backgroundColor:"transparent"},spotlightLabel:{position:"absolute",backgroundColor:buoyColors.card,borderWidth:1,borderColor:buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},spotlightLabelText:{color:buoyColors.primary,fontSize:11,fontWeight:"600",fontFamily:"monospace"}});export default HighlightUpdatesOverlay;