@buoy-gg/highlight-updates 7.0.41 → 7.0.43

package/lib/module/preset.js

@@ -1,272 +1 @@
-"use strict";
-
-/**
- * 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]} />
- * ```
- */
-
-import React, { useState, useEffect, useCallback } from "react";
-import { HighlighterIcon, HighlightIcon as HighlightIconBase } from "@buoy-gg/floating-tools-core";
-import HighlightUpdatesController from "./highlight-updates/utils/HighlightUpdatesController";
-import { HighlightUpdatesModal } from "./highlight-updates/components/HighlightUpdatesModal";
-
-/**
- * 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.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function HighlightIcon({
-  size
-}) {
-  const [enabled, setEnabled] = useState(() => HighlightUpdatesController.isEnabled());
-  useEffect(() => {
-    const unsubscribe = HighlightUpdatesController.subscribe(isEnabled => {
-      setEnabled(isEnabled);
-    });
-    return unsubscribe;
-  }, []);
-  return /*#__PURE__*/_jsx(HighlightIconBase, {
-    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] = useState(null);
-
-  // Register badge press callback when modal is visible
-  useEffect(() => {
-    if (props.visible) {
-      // Register callback to handle badge presses
-      HighlightUpdatesController.setBadgePressCallback(nativeTag => {
-        setTargetNativeTag(nativeTag);
-      });
-    }
-    return () => {
-      // Clear callback when modal is closed or unmounted
-      if (!props.visible) {
-        HighlightUpdatesController.setBadgePressCallback(null);
-      }
-    };
-  }, [props.visible]);
-
-  // Clear the target after it's been handled
-  const handleInitialNativeTagHandled = useCallback(() => {
-    setTargetNativeTag(null);
-  }, []);
-  return /*#__PURE__*/_jsx(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
- */
-export const 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.isInitialized()) {
-      HighlightUpdatesController.initialize();
-    }
-    HighlightUpdatesController.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,
- * });
- * ```
- */
-export 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.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] = useState(() => HighlightUpdatesController.isEnabled());
-    useEffect(() => {
-      const unsubscribe = HighlightUpdatesController.subscribe(isEnabled => {
-        setEnabled(isEnabled);
-      });
-      return unsubscribe;
-    }, []);
-    return /*#__PURE__*/_jsx(HighlightIconBase, {
-      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.isInitialized()) {
-        HighlightUpdatesController.initialize();
-      }
-      HighlightUpdatesController.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.
- */
-export const highlightUpdatesModalPreset = {
-  id: "highlight-updates-modal",
-  name: "HIGHLIGHT",
-  description: "View component render tracking modal",
-  slot: "both",
-  icon: ({
-    size
-  }) => /*#__PURE__*/_jsx(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",
- * });
- * ```
- */
-export function createHighlightUpdatesModalTool(options) {
-  const enabledColor = options?.enabledColor || "#10b981";
-  const disabledColor = options?.disabledColor || "#6b7280";
-
-  // Auto-initialize if requested
-  if (options?.autoInitialize) {
-    setTimeout(() => {
-      HighlightUpdatesController.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__*/_jsx(HighlighterIcon, {
-      size: size,
-      color: enabledColor
-    }),
-    component: HighlightUpdatesModalWithBadgeNavigation,
-    props: {
-      enableSharedModalDimensions: false
-    }
-  };
-}
+"use strict";import C,{useState as s,useEffect as r,useCallback as H}from"react";import{HighlighterIcon as d,HighlightIcon as g}from"@buoy-gg/floating-tools-core";import i from"./highlight-updates/utils/HighlightUpdatesController";import{HighlightUpdatesModal as f}from"./highlight-updates/components/HighlightUpdatesModal";import{jsx as a}from"react/jsx-runtime";function I({size:e}){const[t,o]=s(()=>i.isEnabled());r(()=>{const n=i.subscribe(l=>{o(l)});return n},[]);return a(g,{size:e,color:t?"#10b981":"#6b7280"})}function c(){return null}function h(e){const[t,o]=s(null);r(()=>{if(e.visible){i.setBadgePressCallback(l=>{o(l)})}return()=>{if(!e.visible){i.setBadgePressCallback(null)}}},[e.visible]);const n=H(()=>{o(null)},[]);return a(f,{...e,initialNativeTag:t,onInitialNativeTagHandled:n})}export const highlightUpdatesPreset={id:"highlight-updates",name:"TOGGLE HIGHLIGHT",description:"Toggle component render highlights",slot:"row",icon:I,component:c,props:{},launchMode:"toggle-only",onPress:()=>{if(!i.isInitialized()){i.initialize()}i.toggle()}};export function createHighlightUpdatesTool(e){const t=e?.enabledColor||"#10b981";const o=e?.disabledColor||"#6b7280";if(e?.autoInitialize){setTimeout(()=>{i.initialize()},1e3)}const n=({size:l})=>{const[u,b]=s(()=>i.isEnabled());r(()=>{const m=i.subscribe(p=>{b(p)});return m},[]);return a(g,{size:l,color:u?t:o})};return{id:e?.id||"highlight-updates",name:e?.name||"TOGGLE HIGHLIGHT",description:e?.description||"Toggle component render highlights",slot:"row",icon:n,component:c,props:{},launchMode:"toggle-only",onPress:()=>{if(!i.isInitialized()){i.initialize()}i.toggle()}}}export const highlightUpdatesModalPreset={id:"highlight-updates-modal",name:"HIGHLIGHT",description:"View component render tracking modal",slot:"both",icon:({size:e})=>a(d,{size:e}),component:h,props:{enableSharedModalDimensions:false}};export function createHighlightUpdatesModalTool(e){const t=e?.enabledColor||"#10b981";const o=e?.disabledColor||"#6b7280";if(e?.autoInitialize){setTimeout(()=>{i.initialize()},1e3)}return{id:e?.id||"highlight-updates-modal",name:e?.name||"HIGHLIGHT",description:e?.description||"View component render tracking modal",slot:"both",icon:({size:n})=>a(d,{size:n,color:t}),component:h,props:{enableSharedModalDimensions:false}}}

package/lib/module/sync/highlightUpdatesSyncAdapter.js

@@ -1,230 +1 @@
-"use strict";
-
-import HighlightUpdatesController from "../highlight-updates/utils/HighlightUpdatesController";
-import { RenderTracker } from "../highlight-updates/utils/RenderTracker";
-import { describeScreen, tapElement, waitFor } from "../highlight-updates/utils/screenElements";
-import { clearTouchCapture, getTouchCaptureStatus, readTouchCapture, startTouchCapture, stopTouchCapture } from "../highlight-updates/utils/touchCapture";
-import { CommitProfiler } from "../highlight-updates/utils/CommitProfiler";
-function ensureInitialized() {
-  if (!HighlightUpdatesController.isInitialized()) {
-    HighlightUpdatesController.initialize();
-  }
-}
-function toWireCause(cause) {
-  if (!cause) return undefined;
-  const {
-    hookChanges: _hookChanges,
-    ...rest
-  } = cause;
-  return rest;
-}
-
-/**
- * Wire-form render: keep identity + counts + last cause type, drop the
- * per-component history buffer (up to 20 events, and hook/prop snapshots
- * when those settings are on). Dashboards fetch history via getRenderDetail.
- */
-function toWireRender(render) {
-  const {
-    renderHistory,
-    lastRenderCause,
-    ...rest
-  } = render;
-  return {
-    ...rest,
-    lastRenderCause: toWireCause(lastRenderCause),
-    historyCount: renderHistory?.length ?? 0
-  };
-}
-
-/**
- * Deliberately serializes to test serializability, unlike the snapshot guards
- * elsewhere. This runs once per `getRenderDetail` — a user clicking one row —
- * not on the ~5x/sec snapshot, so there is no unbounded per-tick cost to
- * avoid. Probing with a size walk first would just traverse the whole render
- * before doing this anyway.
- */
-function jsonSafeRender(render) {
-  try {
-    JSON.stringify(render);
-    return render;
-  } catch {
-    return {
-      ...render,
-      lastRenderCause: toWireCause(render.lastRenderCause),
-      renderHistory: render.renderHistory?.map(event => ({
-        ...event,
-        capturedProps: undefined,
-        capturedState: undefined,
-        cause: toWireCause(event.cause) ?? event.cause
-      }))
-    };
-  }
-}
-
-/**
- * Measurement window for automated callers (MCP `measure_renders`).
- *
- * Backed by CommitProfiler, NOT the RenderTracker that feeds the overlay, and
- * the difference is the whole point. RenderTracker tracks HOST VIEWS: ask it
- * why `DealRow` re-rendered and it answers about the native `View` inside it —
- * "props changed: accessibilityState, accessibilityValue" — which is true and
- * useless. CommitProfiler walks COMPOSITE fibers, so it answers about the
- * component you named: which of ITS props changed, whether they changed by
- * value or only by identity, and which parent dragged it along.
- *
- * It also touches none of the user's overlay state — no enabling, no clearing
- * counters someone was collecting, nothing drawn on screen. A measurement is
- * invisible.
- */
-function beginMeasurement() {
-  if (!CommitProfiler.isSupported()) {
-    return {
-      ok: false,
-      reason: "render capture needs a dev build with the React DevTools hook available"
-    };
-  }
-  CommitProfiler.startCapture({
-    detail: true
-  });
-  return {
-    ok: true
-  };
-}
-function endMeasurement() {
-  return {
-    summary: CommitProfiler.stopCapture()
-  };
-}
-
-/**
- * Sync adapter for the highlight-updates tool, consumed by
- * @buoy-gg/external-sync's `useExternalSync` (structurally matches its
- * ToolSyncAdapter interface so this package doesn't need a dependency on it).
- *
- * The visual highlights draw on the DEVICE's UI, but the render-tracking
- * data (component list, render counts, causes, history) is plain data — the
- * snapshot carries it so the dashboard renders the real HighlightUpdatesModal
- * as a mirror. Mutations (toggle, freeze, clear, spotlight) come back as
- * actions and run on the device; spotlight even highlights the component on
- * the phone screen while browsing details from the desktop.
- *
- * v2: per-component `renderHistory` (and hook-change values on lastRenderCause)
- * stay on the device. Dashboards fetch them via `getRenderDetail`.
- */
-export const highlightUpdatesSyncAdapter = {
-  // v3: beginMeasurement / endMeasurement — a CommitProfiler capture window
-  // for automated callers, with per-component causes. Invisible to the user.
-  version: 3,
-  getSnapshot: () => ({
-    enabled: HighlightUpdatesController.isEnabled(),
-    frozen: HighlightUpdatesController.getFrozen(),
-    // True while tracking but the visual boxes are hidden (screenshot tool).
-    highlightsSuppressed: HighlightUpdatesController.getHighlightsSuppressed(),
-    renders: RenderTracker.getRenders().map(toWireRender),
-    trackerState: RenderTracker.getState()
-  }),
-  subscribe: onChange => {
-    const unsubscribeEnabled = HighlightUpdatesController.subscribe(onChange);
-    const unsubscribeFreeze = HighlightUpdatesController.subscribeToFreeze(onChange);
-    const unsubscribeRenders = RenderTracker.subscribe(onChange);
-    const unsubscribeTrackerState = RenderTracker.subscribeToState(onChange);
-    return () => {
-      unsubscribeEnabled();
-      unsubscribeFreeze();
-      unsubscribeRenders();
-      unsubscribeTrackerState();
-    };
-  },
-  actions: {
-    // Capture window for automated callers (MCP `measure_renders`). Pairs:
-    // begin -> drive the UI -> end. `end` always restores.
-    beginMeasurement: () => beginMeasurement(),
-    endMeasurement: () => endMeasurement(),
-    /**
-     * On-demand detail: one component's real renderHistory + lastRenderCause
-     * (including hookChanges). Wire-form snapshots omit those.
-     */
-    getRenderDetail: params => {
-      const {
-        nativeTag
-      } = params ?? {};
-      if (nativeTag == null) {
-        return {
-          found: false,
-          reason: "missing nativeTag"
-        };
-      }
-      const render = RenderTracker.getRender(String(nativeTag));
-      if (!render) return {
-        found: false,
-        reason: "unknown nativeTag"
-      };
-      return {
-        found: true,
-        nativeTag,
-        render: jsonSafeRender(render)
-      };
-    },
-    toggle: () => {
-      ensureInitialized();
-      HighlightUpdatesController.toggle();
-    },
-    setEnabled: params => {
-      ensureInitialized();
-      HighlightUpdatesController.setEnabled(params.enabled);
-    },
-    toggleFreeze: () => {
-      HighlightUpdatesController.toggleFreeze();
-    },
-    clearRenderCounts: () => {
-      HighlightUpdatesController.clearRenderCounts();
-    },
-    setSpotlight: params => {
-      HighlightUpdatesController.setSpotlight(params.nativeTag);
-    },
-    // Resolve a component (by testID/nativeID/name/nativeTag) to a fresh
-    // on-screen rectangle — best-effort scrolling it into view first — so the
-    // desktop can crop a simulator screenshot to exactly that component. The
-    // returned value (rect + scale + screen) flows back as the action result.
-    locateComponent: params => {
-      ensureInitialized();
-      return HighlightUpdatesController.locateComponent(params ?? {});
-    },
-    // Track + measure components WITHOUT drawing the highlight boxes, so the
-    // desktop screenshot tool can locate components with no on-device overlay.
-    setSilentTracking: params => {
-      ensureInitialized();
-      HighlightUpdatesController.setSilentTracking(params.enabled ?? false);
-    },
-    // Walk the live fiber tree and return the current screen's meaningful /
-    // interactive elements, each with normalized tap coordinates. Powers the
-    // MCP `describe_screen` reader — no screenshot, no silent-tracking needed.
-    describeScreen: params => describeScreen(params ?? {}),
-    // Tap an element purely in JS: resolve it (by nativeTag / testID / query),
-    // find the nearest onPress up its fiber chain, and invoke it with a
-    // synthetic press event. Powers the MCP `tap_element` action.
-    tapElement: params => tapElement(params ?? {}),
-    // Block until an element is on screen (or gone), so a driver can act on a
-    // screen that has finished loading instead of the skeleton that was there
-    // when `navigate` returned. Same matcher `tapElement` ranks by.
-    waitFor: params => waitFor(params ?? {}),
-    // ── Touch capture: the recording half of tapElement ──────────────────
-    // Observe what a HUMAN taps, named in the same vocabulary tapElement
-    // searches by, so the Scenarios recorder can turn a real session into a
-    // replayable macro. Lives here because this tool already owns the fiber
-    // walk both halves need.
-    startTouchCapture: () => startTouchCapture(),
-    stopTouchCapture: () => {
-      stopTouchCapture();
-      return getTouchCaptureStatus();
-    },
-    clearTouchCapture: () => {
-      clearTouchCapture();
-      return {
-        ok: true
-      };
-    },
-    readTouchCapture: params => readTouchCapture(params?.sinceSeq ?? 0)
-  }
-};
+"use strict";import t from"../highlight-updates/utils/HighlightUpdatesController";import{RenderTracker as s}from"../highlight-updates/utils/RenderTracker";import{describeScreen as d,tapElement as l,waitFor as p}from"../highlight-updates/utils/screenElements";import{clearTouchCapture as g,getTouchCaptureStatus as b,readTouchCapture as f,startTouchCapture as h,stopTouchCapture as m}from"../highlight-updates/utils/touchCapture";import{CommitProfiler as o}from"../highlight-updates/utils/CommitProfiler";function a(){if(!t.isInitialized()){t.initialize()}}function i(e){if(!e)return void 0;const{hookChanges:r,...n}=e;return n}function C(e){const{renderHistory:r,lastRenderCause:n,...u}=e;return{...u,lastRenderCause:i(n),historyCount:r?.length??0}}function S(e){try{JSON.stringify(e);return e}catch{return{...e,lastRenderCause:i(e.lastRenderCause),renderHistory:e.renderHistory?.map(r=>({...r,capturedProps:void 0,capturedState:void 0,cause:i(r.cause)??r.cause}))}}}function T(){if(!o.isSupported()){return{ok:false,reason:"render capture needs a dev build with the React DevTools hook available"}}o.startCapture({detail:true});return{ok:true}}function R(){return{summary:o.stopCapture()}}export const highlightUpdatesSyncAdapter={version:3,getSnapshot:()=>({enabled:t.isEnabled(),frozen:t.getFrozen(),highlightsSuppressed:t.getHighlightsSuppressed(),renders:s.getRenders().map(C),trackerState:s.getState()}),subscribe:e=>{const r=t.subscribe(e);const n=t.subscribeToFreeze(e);const u=s.subscribe(e);const c=s.subscribeToState(e);return()=>{r();n();u();c()}},actions:{beginMeasurement:()=>T(),endMeasurement:()=>R(),getRenderDetail:e=>{const{nativeTag:r}=e??{};if(r==null){return{found:false,reason:"missing nativeTag"}}const n=s.getRender(String(r));if(!n)return{found:false,reason:"unknown nativeTag"};return{found:true,nativeTag:r,render:S(n)}},toggle:()=>{a();t.toggle()},setEnabled:e=>{a();t.setEnabled(e.enabled)},toggleFreeze:()=>{t.toggleFreeze()},clearRenderCounts:()=>{t.clearRenderCounts()},setSpotlight:e=>{t.setSpotlight(e.nativeTag)},locateComponent:e=>{a();return t.locateComponent(e??{})},setSilentTracking:e=>{a();t.setSilentTracking(e.enabled??false)},describeScreen:e=>d(e??{}),tapElement:e=>l(e??{}),waitFor:e=>p(e??{}),startTouchCapture:()=>h(),stopTouchCapture:()=>{m();return b()},clearTouchCapture:()=>{g();return{ok:true}},readTouchCapture:e=>f(e?.sinceSeq??0)}};