@buoy-gg/highlight-updates 7.0.35 → 7.0.38

package/lib/module/highlight-updates/utils/RenderCauseDetector.js

@@ -1,1830 +1 @@
-/**
- * RenderCauseDetector
- *
- * Detects WHY a component rendered by comparing current fiber state
- * to previously stored state. Supports detection of:
- * - First mount
- * - Props changes (with changed key names)
- * - Hooks/state changes (with hook indices)
- * - Parent re-renders
- *
- * TWO-LEVEL CAUSATION:
- * 1. Native level: Why did the native view's props change? (style, accessibilityState, etc.)
- * 2. Component level: Why did the owning React component re-render? (props, state, parent)
- *
- * This gives the full picture:
- * "StepperValueDisplay re-rendered because PARENT, which caused native Text to update PROPS [style]"
- *
- * COMPONENT-SPECIFIC DETECTION:
- * Different native components have different important props:
- * - RCTText: `children` IS the text content - always track it
- * - RCTView: `children` is React elements - skip it
- * - RCTImageView: `source` is the image URL - track it
- *
- * See: RENDER_CAUSE_TEXT_COMPONENT_PLAN.md for full documentation
- */
-
-"use strict";
-
-// One implementation of "did this component's own state actually change?",
-// shared with CommitProfiler. The two classifiers are separate on purpose;
-// this question is not, and both of them got it wrong the same way.
-import { hookStateChanged } from "./ownStateChanged";
-
-// ============================================================================
-// TYPE DEFINITIONS
-// Based on React Native source: packages/react-native/Libraries/Renderer/
-// ============================================================================
-
-/**
- * React Fiber Work Tags
- * Identifies the type of fiber node in the tree
- *
- * Source: ReactWorkTags.js in React source
- */
-
-// IncompleteFunctionComponent
-
-/**
- * React Native Host Component Types
- * Native view types that we can detect and handle specifically
- *
- * Source: packages/react-native/Libraries/Components/
- */
-
-// Other native components
-
-/**
- * Component-specific prop detection configuration
- * Defines which props are meaningful for each native component type
- */
-
-/**
- * Detected hook type for categorization
- * Determines what kind of React hook we're looking at
- */
-
-/**
- * Extracted hook state with type information
- * Represents a single hook's current state for comparison
- */
-
-/**
- * Configuration for each native component type
- * Tells us which props are meaningful to track for render cause detection
- */
-const COMPONENT_PROP_CONFIGS = {
-  // Text components - children IS the actual text content
-  RCTText: {
-    alwaysTrack: ["children"],
-    // The displayed text/number
-    skip: [],
-    description: "Text component - children is the displayed content"
-  },
-  RCTVirtualText: {
-    alwaysTrack: ["children"],
-    // Nested text content
-    skip: [],
-    description: "Virtual Text (nested) - children is the displayed content"
-  },
-  // View - children is React elements, not meaningful for diff
-  RCTView: {
-    alwaysTrack: [],
-    skip: ["children"],
-    // React elements, not useful to track
-    description: "View container - children are React elements"
-  },
-  // Image - source is the important prop
-  RCTImageView: {
-    alwaysTrack: ["source"],
-    skip: ["children"],
-    description: "Image - source contains the image URL/require"
-  },
-  // TextInput - value is important
-  RCTTextInput: {
-    alwaysTrack: ["value", "defaultValue"],
-    skip: ["children"],
-    description: "TextInput - value is the input content"
-  },
-  // Switch - value is the on/off state
-  RCTSwitch: {
-    alwaysTrack: ["value"],
-    skip: ["children"],
-    description: "Switch - value is the toggle state"
-  },
-  // Default for unknown components
-  default: {
-    alwaysTrack: [],
-    skip: ["children"],
-    // Skip children by default
-    description: "Unknown component type"
-  }
-};
-
-/**
- * Get the prop configuration for a native component type
- */
-function getComponentPropConfig(fiberType) {
-  if (!fiberType) return COMPONENT_PROP_CONFIGS.default;
-  return COMPONENT_PROP_CONFIGS[fiberType] || COMPONENT_PROP_CONFIGS.default;
-}
-
-/**
- * Stored fiber state for comparison between renders
- */
-
-// ============================================================================
-// COMPONENT FIBER STATE STORAGE
-// ============================================================================
-
-/**
- * Stored component fiber state for comparison between renders.
- * Now includes extracted hook states for Phase 3 hook value tracking.
- */
-
-/**
- * Storage for previous component fiber states
- *
- * IMPORTANT: React uses double-buffering with "current" and "work-in-progress" fibers.
- * The fiber reference changes between renders as React swaps the trees.
- * We need to check both the fiber AND its alternate when looking up state.
- *
- * WeakMap is used to automatically clean up when fibers are garbage collected.
- */
-const componentFiberStates = new WeakMap();
-
-/**
- * Get previous state for a component fiber, checking both current and alternate.
- *
- * React's reconciler maintains two fiber trees:
- * - "current" - the tree currently rendered to screen
- * - "workInProgress" - the tree being built for the next render
- *
- * These are linked via the `alternate` property. When a render completes,
- * they swap roles. So the fiber we see this render may be the alternate
- * of what we saw last render.
- *
- * See: packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
- */
-function getComponentFiberPrevState(fiber) {
-  if (!fiber) return undefined;
-
-  // First, try the fiber itself
-  let prev = componentFiberStates.get(fiber);
-  if (prev) return prev;
-
-  // If not found, try its alternate (the other side of double-buffering)
-  if (fiber.alternate) {
-    prev = componentFiberStates.get(fiber.alternate);
-    if (prev) return prev;
-  }
-  return undefined;
-}
-
-/**
- * Store state for a component fiber.
- * Stores on both the fiber and its alternate to ensure we find it next render.
- */
-function setComponentFiberState(fiber, state) {
-  if (!fiber) return;
-
-  // Store on the current fiber
-  componentFiberStates.set(fiber, state);
-
-  // Also store on alternate if it exists, so we find it regardless of which
-  // side of double-buffering we see next render
-  if (fiber.alternate) {
-    componentFiberStates.set(fiber.alternate, state);
-  }
-}
-
-// Storage for previous fiber states
-const previousStates = new Map();
-
-// Configuration
-const MAX_STORED_STATES = 500;
-const MAX_CHANGED_KEYS = 10;
-const MAX_HOOK_DEPTH = 50;
-const MAX_PARENT_DEPTH = 50;
-
-// React Native internal components to skip when finding user components
-const INTERNAL_COMPONENT_NAMES = new Set([
-// React Native core primitives
-'View', 'Text', 'TextImpl', 'Image', 'ScrollView', 'FlatList', 'SectionList', 'TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'Pressable', 'TextInput', 'Switch', 'ActivityIndicator', 'Modal', 'StatusBar', 'KeyboardAvoidingView',
-// Animated components
-'AnimatedComponent', 'AnimatedComponentWrapper',
-// React internals
-'Fragment', 'Suspense', 'Provider', 'Consumer', 'Context', 'ForwardRef',
-// Common wrapper names
-'Unknown', 'Component']);
-
-/**
- * Check if a component name is an internal React Native component
- */
-function isInternalComponentName(name) {
-  if (!name) return true;
-  if (INTERNAL_COMPONENT_NAMES.has(name)) return true;
-  // Skip Animated.* wrappers
-  if (name.startsWith('Animated')) return true;
-  return false;
-}
-
-/**
- * Get the owning React component fiber for a host fiber.
- * Walks up the fiber tree to find the first USER-DEFINED component,
- * skipping React Native internal components like View, Text, etc.
- */
-function getOwningComponentFiber(fiber) {
-  if (!fiber) return null;
-
-  // Walk up to find the component that owns this host element
-  let current = fiber._debugOwner || fiber.return;
-  let depth = 0;
-  let firstComponentFiber = null; // Fallback if no user component found
-
-  while (current && depth < 30) {
-    // Function components have tag 0 (FunctionComponent) or 11 (ForwardRef)
-    // Class components have tag 1 (ClassComponent)
-    // Host components have tag 5 (HostComponent) - skip these
-    const tag = current.tag;
-
-    // Tags: 0=FunctionComponent, 1=ClassComponent, 11=ForwardRef, 15=SimpleMemoComponent
-    if (tag === 0 || tag === 1 || tag === 11 || tag === 15) {
-      const name = getComponentNameFromFiber(current);
-
-      // Remember first component as fallback
-      if (!firstComponentFiber) {
-        firstComponentFiber = current;
-      }
-
-      // Return if this is a user-defined component (not internal)
-      if (!isInternalComponentName(name)) {
-        return current;
-      }
-    }
-    current = current.return;
-    depth++;
-  }
-
-  // Return first component found as fallback (even if internal)
-  return firstComponentFiber;
-}
-
-/**
- * Get component name from a fiber
- */
-function getComponentNameFromFiber(fiber) {
-  if (!fiber) return null;
-  const type = fiber.type;
-  if (type) {
-    if (typeof type === 'string') return type;
-    if (type.name) return type.name;
-    if (type.displayName) return type.displayName;
-  }
-  return null;
-}
-
-// ============================================================================
-// HOOK STATE EXTRACTION (Phase 3)
-// ============================================================================
-
-/**
- * Detect the type of a hook based on its structure.
- *
- * React hooks have different shapes:
- * - useState/useReducer: Has a `queue` property with dispatch function
- * - useRef: memoizedState is { current: value }
- * - useMemo/useCallback: memoizedState is [value, deps] array
- * - useEffect/useLayoutEffect: memoizedState is an effect object with tag
- *
- * See: packages/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js
- */
-function detectHookType(hookState) {
-  if (!hookState || typeof hookState !== 'object') {
-    return 'unknown';
-  }
-
-  // useState/useReducer: has a queue with dispatch function
-  // This is the most reliable indicator
-  if (hookState.queue !== null && hookState.queue !== undefined) {
-    // Could be useState or useReducer - both have queue
-    // useReducer typically has a more complex reducer, but we can't easily distinguish
-    return 'useState';
-  }
-  const memoizedState = hookState.memoizedState;
-
-  // useRef: memoizedState is an object with only { current: value }
-  if (memoizedState !== null && typeof memoizedState === 'object' && !Array.isArray(memoizedState) && 'current' in memoizedState && Object.keys(memoizedState).length === 1) {
-    return 'useRef';
-  }
-
-  // useMemo/useCallback: memoizedState is [value, deps] array
-  // The deps is an array used for dependency comparison
-  if (Array.isArray(memoizedState) && memoizedState.length === 2) {
-    const [, deps] = memoizedState;
-    // If second element is an array (deps), it's likely useMemo/useCallback
-    if (Array.isArray(deps) || deps === null) {
-      // useCallback stores a function, useMemo stores any value
-      if (typeof memoizedState[0] === 'function') {
-        return 'useCallback';
-      }
-      return 'useMemo';
-    }
-  }
-
-  // useEffect/useLayoutEffect: memoizedState has effect-specific properties
-  if (memoizedState !== null && typeof memoizedState === 'object' && !Array.isArray(memoizedState) && ('tag' in memoizedState || 'create' in memoizedState || 'destroy' in memoizedState)) {
-    return 'useEffect';
-  }
-  return 'unknown';
-}
-
-/**
- * Extract the actual value from a hook's memoizedState.
- * Different hooks store values differently.
- */
-function extractHookValue(hookState, hookType) {
-  const memoizedState = hookState?.memoizedState;
-  switch (hookType) {
-    case 'useState':
-    case 'useReducer':
-      // useState/useReducer: memoizedState IS the value directly
-      return memoizedState;
-    case 'useRef':
-      // useRef: memoizedState is { current: value }
-      return memoizedState?.current;
-    case 'useMemo':
-    case 'useCallback':
-      // useMemo/useCallback: memoizedState is [value, deps]
-      return Array.isArray(memoizedState) ? memoizedState[0] : memoizedState;
-    case 'useEffect':
-      // useEffect: we don't really have a "value" to show
-      return '[effect]';
-    default:
-      return memoizedState;
-  }
-}
-
-/**
- * Extract all hook states from a fiber's memoizedState linked list.
- *
- * For function components, fiber.memoizedState is a linked list where each
- * node represents one hook call. The nodes are linked via the `next` property.
- *
- * This function walks the list and extracts:
- * - The hook's index (position in the list)
- * - The detected hook type (useState, useRef, useMemo, etc.)
- * - The actual value stored in the hook
- *
- * @param fiber - The component fiber (must be a function component)
- * @returns Array of extracted hook states, or null if no hooks
- */
-function extractHookStates(fiber) {
-  if (!fiber?.memoizedState) return null;
-
-  // Check if this looks like a hooks linked list (has 'next' property)
-  // Class components have different memoizedState structure
-  const firstHook = fiber.memoizedState;
-  if (typeof firstHook !== 'object' || firstHook === null) {
-    return null;
-  }
-
-  // If it doesn't have 'next', it might be a class component state object
-  // or a single primitive value
-  if (!('next' in firstHook) && !('queue' in firstHook) && !('memoizedState' in firstHook)) {
-    return null;
-  }
-  const states = [];
-  let hookState = firstHook;
-  let index = 0;
-
-  // Walk the linked list, with safety limit
-  while (hookState !== null && index < MAX_HOOK_DEPTH) {
-    const hookType = detectHookType(hookState);
-    const value = extractHookValue(hookState, hookType);
-    states.push({
-      index,
-      type: hookType,
-      value,
-      rawState: hookState.memoizedState
-    });
-    hookState = hookState.next;
-    index++;
-  }
-  return states.length > 0 ? states : null;
-}
-
-/**
- * Compare two sets of hook states and find what changed.
- *
- * Returns an array of HookStateChange objects describing each change
- * with meaningful before/after values.
- *
- * @param prevStates - Previous hook states (from last render)
- * @param currentStates - Current hook states
- * @returns Array of changes, or null if no changes detected
- */
-function compareHookStates(prevStates, currentStates) {
-  // Can't compare if either is missing
-  if (!prevStates || !currentStates) return null;
-  const changes = [];
-
-  // Compare each hook by index
-  const maxLength = Math.max(prevStates.length, currentStates.length);
-  for (let i = 0; i < maxLength; i++) {
-    const prev = prevStates[i];
-    const curr = currentStates[i];
-
-    // New hook added (shouldn't normally happen, but handle it)
-    if (!prev && curr) {
-      changes.push({
-        index: i,
-        type: curr.type,
-        currentValue: formatHookValue(curr.value, curr.type),
-        description: `Hook[${i}] added`
-      });
-      continue;
-    }
-
-    // Hook removed (shouldn't normally happen)
-    if (prev && !curr) {
-      changes.push({
-        index: i,
-        type: prev.type,
-        previousValue: formatHookValue(prev.value, prev.type),
-        description: `Hook[${i}] removed`
-      });
-      continue;
-    }
-
-    // Both exist - compare values
-    if (prev && curr) {
-      // Skip if raw state reference is the same (no change)
-      if (prev.rawState === curr.rawState) {
-        continue;
-      }
-
-      // For effects, skip (they have complex internal state)
-      if (curr.type === 'useEffect') {
-        continue;
-      }
-
-      // For useMemo/useCallback, the value changing means deps changed
-      // Skip these as they're not typically interesting for debugging
-      if (curr.type === 'useMemo' || curr.type === 'useCallback') {
-        continue;
-      }
-
-      // Only report useState/useReducer/useRef changes (most useful)
-      if (curr.type === 'useState' || curr.type === 'useReducer' || curr.type === 'useRef') {
-        const prevFormatted = formatHookValue(prev.value, prev.type);
-        const currFormatted = formatHookValue(curr.value, curr.type);
-        changes.push({
-          index: i,
-          type: curr.type,
-          previousValue: prevFormatted,
-          currentValue: currFormatted,
-          description: `${prevFormatted} → ${currFormatted}`
-        });
-      }
-    }
-  }
-  return changes.length > 0 ? changes : null;
-}
-
-/**
- * Format a hook value for display.
- * Handles different value types appropriately.
- */
-function formatHookValue(value, hookType) {
-  // For useRef, the value is already unwrapped
-  if (hookType === 'useRef') {
-    return formatDisplayValue(value);
-  }
-
-  // For useState/useReducer, value is the state directly
-  return formatDisplayValue(value);
-}
-
-/**
- * Format any value for display, handling special cases.
- */
-function formatDisplayValue(value) {
-  if (value === null) return null;
-  if (value === undefined) return undefined;
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'number') return value;
-  if (typeof value === 'string') {
-    // Truncate long strings
-    return value.length > 30 ? value.slice(0, 30) + '...' : value;
-  }
-  if (typeof value === 'function') {
-    return `[Function: ${value.name || 'anonymous'}]`;
-  }
-  if (Array.isArray(value)) {
-    return `[Array: ${value.length} items]`;
-  }
-  if (typeof value === 'object') {
-    // For objects, just show type hint
-    const keys = Object.keys(value);
-    return `{Object: ${keys.length} keys}`;
-  }
-  return String(value);
-}
-
-// ============================================================================
-// COMPONENT CAUSE DETECTION
-// ============================================================================
-
-/**
- * Result of component cause detection.
- * Includes the cause type and detailed hook state changes (Phase 3).
- */
-
-/**
- * Detect why a React component re-rendered (component-level cause).
- * This is different from native-level cause - it tells you WHY the
- * React component function was called, not what native props changed.
- *
- * DOUBLE-BUFFERING HANDLING:
- * React maintains two fiber trees (current/workInProgress) that swap each render.
- * We use getComponentFiberPrevState() to check both the fiber and its alternate
- * when looking up previous state, ensuring we don't falsely detect "mount".
- *
- * SWAP DETECTION:
- * After React commits, fibers swap roles. The fiber we receive might be the "old"
- * fiber (pre-update values) with its alternate being the "new" fiber (post-update).
- * We detect this by comparing against our stored previous state and swap if needed.
- *
- * DETECTION LOGIC:
- * 1. If no previous state found → "mount" (first render)
- * 2. If memoizedProps changed → "props" (parent passed different props)
- * 3. If memoizedState changed → "state" (useState/useReducer updated)
- * 4. Otherwise → "parent" (parent re-rendered, no changes to this component)
- *
- * PHASE 3 ENHANCEMENT:
- * When state changes are detected, we also extract the actual hook values
- * and compare them to provide meaningful before/after information.
- */
-function detectComponentCause(componentFiber) {
-  if (!componentFiber) return {
-    cause: "unknown",
-    hookChanges: null
-  };
-
-  // STRATEGY: Handle React's double-buffering swap
-  // The fiber we receive might be the OLD fiber (with previous values) where
-  // its alternate contains the NEW values. We need to detect and correct this.
-  let currentFiber = componentFiber;
-  let alternateFiber = componentFiber.alternate;
-
-  // Check if we need to swap fiber and alternate using WeakMap stored state
-  const storedPrev = getComponentFiberPrevState(componentFiber);
-  if (storedPrev && alternateFiber) {
-    // Strategy: Compare first useState hook values to determine which is current
-    // The fiber whose state matches stored is the OLD fiber; swap it!
-    const fiberHooks = extractHookStates(componentFiber);
-    const altHooks = extractHookStates(alternateFiber);
-    const storedHooks = storedPrev.extractedHooks;
-    if (fiberHooks && altHooks && storedHooks && storedHooks.length > 0) {
-      // Find first useState hook for comparison
-      const storedStateHook = storedHooks.find(h => h.type === 'useState');
-      if (storedStateHook) {
-        const fiberStateHook = fiberHooks.find(h => h.index === storedStateHook.index);
-        const altStateHook = altHooks.find(h => h.index === storedStateHook.index);
-        if (fiberStateHook && altStateHook) {
-          const fiberMatchesStored = fiberStateHook.value === storedStateHook.value;
-          const altMatchesStored = altStateHook.value === storedStateHook.value;
-
-          // If fiber matches stored but alternate doesn't, fiber is OLD - swap!
-          if (fiberMatchesStored && !altMatchesStored) {
-            currentFiber = alternateFiber;
-            alternateFiber = componentFiber;
-          }
-        }
-      }
-    }
-  }
-
-  // Extract hook states from the CORRECT current fiber
-  const currentHooks = extractHookStates(currentFiber);
-
-  // Get previous state from alternate (which is now correctly the OLD fiber)
-  let prevMemoizedProps = null;
-  let prevMemoizedState = null;
-  let prevExtractedHooks = null;
-  if (alternateFiber) {
-    // Alternate fiber available - use it as previous state
-    prevMemoizedProps = alternateFiber.memoizedProps;
-    prevMemoizedState = alternateFiber.memoizedState;
-    prevExtractedHooks = extractHookStates(alternateFiber);
-  } else {
-    // Fall back to WeakMap storage (first render won't have alternate)
-    if (storedPrev) {
-      prevMemoizedProps = storedPrev.memoizedProps;
-      prevMemoizedState = storedPrev.memoizedState;
-      prevExtractedHooks = storedPrev.extractedHooks;
-    }
-  }
-
-  // Store current state for next comparison (on both fiber and alternate)
-  // This is critical for swap detection on next render
-  setComponentFiberState(currentFiber, {
-    memoizedProps: currentFiber.memoizedProps,
-    memoizedState: currentFiber.memoizedState,
-    extractedHooks: currentHooks
-  });
-
-  // First render - no previous state found (neither alternate nor WeakMap)
-  if (prevMemoizedProps === null) {
-    return {
-      cause: "mount",
-      hookChanges: null
-    };
-  }
-
-  // Check if props changed (shallow comparison)
-  // This means the parent passed different props to this component
-  const propsChanged = !shallowEqual(prevMemoizedProps, currentFiber.memoizedProps);
-  if (propsChanged) {
-    return {
-      cause: "props",
-      hookChanges: null
-    };
-  }
-
-  // Check if state changed (for hooks, memoizedState is a linked list)
-  // This means useState/useReducer triggered a re-render
-  // NOT `prevMemoizedState !== currentFiber.memoizedState`, which is what this
-  // used to be — see utils/ownStateChanged.ts for why that is wrong and what
-  // it cost. Shared with `CommitProfiler`, which reached the same wrong line
-  // independently; the two classifiers stay separate, this one question does
-  // not.
-  if (hookStateChanged(prevMemoizedState, currentFiber.memoizedState, {
-    isClassComponent: currentFiber.tag === 1
-  })) {
-    // Phase 3: the actual before/after values, for the UI. Only needed once
-    // the cause is settled, and only the overlay displays them.
-    const hookChanges = compareHookStates(prevExtractedHooks, currentHooks);
-    return {
-      cause: "state",
-      hookChanges
-    };
-  }
-
-  // If neither props nor state changed, it's a parent re-render cascade
-  // This component re-rendered because its parent did, not because of its own changes
-  return {
-    cause: "parent",
-    hookChanges: null
-  };
-}
-
-/**
- * Shallow equality check for props objects
- */
-function shallowEqual(objA, objB) {
-  if (objA === objB) return true;
-  if (!objA || !objB) return false;
-  if (typeof objA !== 'object' || typeof objB !== 'object') return false;
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (objA[key] !== objB[key]) return false;
-  }
-  return true;
-}
-
-/**
- * Safe JSON stringify that handles circular references and functions
- */
-function safeStringify(obj, maxDepth = 3) {
-  const seen = new WeakSet();
-  function stringify(value, depth) {
-    if (depth > maxDepth) return "[MAX_DEPTH]";
-    if (value === null) return null;
-    if (value === undefined) return undefined;
-    if (typeof value === "function") return `[Function: ${value.name || "anonymous"}]`;
-    if (typeof value === "symbol") return `[Symbol: ${value.toString()}]`;
-    if (typeof value !== "object") return value;
-    if (seen.has(value)) return "[Circular]";
-    seen.add(value);
-    if (Array.isArray(value)) {
-      return value.slice(0, 10).map(v => stringify(v, depth + 1));
-    }
-    const result = {};
-    const keys = Object.keys(value).slice(0, 20); // Limit keys
-    for (const key of keys) {
-      try {
-        result[key] = stringify(value[key], depth + 1);
-      } catch {
-        result[key] = "[Error accessing]";
-      }
-    }
-    return result;
-  }
-  return stringify(obj, 0);
-}
-
-/**
- * Log raw fiber debug data to console
- */
-function logRawFiberData(nativeTag, fiber, owningComponentFiber, prev, current, componentCause) {
-  const componentName = getComponentNameFromFiber(owningComponentFiber) || "Unknown";
-  console.log("\n========================================");
-  console.log("[RN-BUOY DEBUG] RENDER EVENT");
-  console.log("========================================");
-  console.log(`Native Tag: ${nativeTag}`);
-  console.log(`Component Name: ${componentName}`);
-  console.log(`Is First Render: ${!prev}`);
-  console.log(`Component Cause Detected: ${componentCause}`);
-  console.log("----------------------------------------");
-
-  // Native fiber (host component) data
-  console.log("\n--- NATIVE FIBER (Host Component) ---");
-  console.log("fiber.type:", fiber?.type);
-  console.log("fiber.tag:", fiber?.tag);
-  console.log("fiber.memoizedProps (CURRENT):", safeStringify(fiber?.memoizedProps));
-  console.log("fiber.memoizedState:", safeStringify(fiber?.memoizedState));
-  if (prev) {
-    console.log("PREVIOUS memoizedProps:", safeStringify(prev.memoizedProps));
-    console.log("PREVIOUS memoizedState:", safeStringify(prev.memoizedState));
-  }
-
-  // Component fiber (React component) data
-  console.log("\n--- COMPONENT FIBER (React Component) ---");
-  if (owningComponentFiber) {
-    console.log("componentFiber.type:", owningComponentFiber?.type?.name || owningComponentFiber?.type);
-    console.log("componentFiber.tag:", owningComponentFiber?.tag);
-    console.log("componentFiber.memoizedProps:", safeStringify(owningComponentFiber?.memoizedProps));
-    console.log("componentFiber.memoizedState:", safeStringify(owningComponentFiber?.memoizedState));
-
-    // Try to extract hook state (memoizedState is a linked list for function components)
-    console.log("\n--- HOOKS STATE (linked list walk) ---");
-    let hookState = owningComponentFiber?.memoizedState;
-    let hookIndex = 0;
-    while (hookState && hookIndex < 10) {
-      console.log(`Hook[${hookIndex}]:`, safeStringify({
-        memoizedState: hookState.memoizedState,
-        baseState: hookState.baseState,
-        queue: hookState.queue ? "[Queue object]" : null
-      }));
-      hookState = hookState.next;
-      hookIndex++;
-    }
-
-    // Phase 3: Show extracted hook states with type detection
-    console.log("\n--- EXTRACTED HOOKS (Phase 3) ---");
-    const extractedHooks = extractHookStates(owningComponentFiber);
-    if (extractedHooks) {
-      for (const hook of extractedHooks) {
-        console.log(`Hook[${hook.index}] (${hook.type}):`, formatDisplayValue(hook.value));
-      }
-    } else {
-      console.log("(No hooks extracted)");
-    }
-  } else {
-    console.log("(No component fiber found)");
-  }
-
-  // Children/text content
-  console.log("\n--- CHILDREN/TEXT CONTENT ---");
-  const children = fiber?.memoizedProps?.children;
-  console.log("children type:", typeof children);
-  console.log("children value:", safeStringify(children));
-  console.log("\n========================================\n");
-}
-
-/**
- * Get human-readable name for a fiber work tag
- */
-function getTagName(tag) {
-  if (tag === undefined) return 'undefined';
-  const tags = {
-    0: 'FunctionComponent',
-    1: 'ClassComponent',
-    2: 'IndeterminateComponent',
-    3: 'HostRoot',
-    4: 'HostPortal',
-    5: 'HostComponent',
-    6: 'HostText',
-    7: 'Fragment',
-    8: 'Mode',
-    9: 'ContextConsumer',
-    10: 'ContextProvider',
-    11: 'ForwardRef',
-    12: 'Profiler',
-    13: 'SuspenseComponent',
-    14: 'MemoComponent',
-    15: 'SimpleMemoComponent'
-  };
-  return tags[tag] || `Unknown(${tag})`;
-}
-
-// ============================================================================
-// DEBUG LOGGING FUNCTIONS (by level)
-// ============================================================================
-
-/**
- * MINIMAL logging - Only hook/state value changes
- * Shows just the essential info: "useState: 3334 → 3335"
- *
- * This is the most concise view for debugging state changes.
- */
-function logMinimal(componentName, componentCauseResult) {
-  // Only log if there are actual hook changes
-  if (!componentCauseResult.hookChanges || componentCauseResult.hookChanges.length === 0) {
-    return;
-  }
-  for (const change of componentCauseResult.hookChanges) {
-    console.log(`[${componentName || 'Unknown'}] ${change.type}[${change.index}]: ${change.previousValue} → ${change.currentValue}`);
-  }
-}
-
-/**
- * VERBOSE logging - Component info + cause + value changes
- * Shows component context with the changes.
- */
-function logVerbose(nativeTag, fiber, owningComponentFiber, componentCauseResult, changedNativeProps) {
-  const componentName = getComponentNameFromFiber(owningComponentFiber) || "Unknown";
-  const nativeType = typeof fiber?.type === "string" ? fiber.type : "Unknown";
-  const {
-    cause,
-    hookChanges
-  } = componentCauseResult;
-
-  // Single-line summary
-  console.log(`[RENDER] ${componentName} (${nativeType}:${nativeTag}) | Cause: ${cause.toUpperCase()}` + (changedNativeProps && changedNativeProps.length > 0 ? ` | Props: [${changedNativeProps.join(', ')}]` : ''));
-
-  // Hook changes on separate lines (if any)
-  if (hookChanges && hookChanges.length > 0) {
-    for (const change of hookChanges) {
-      console.log(`  └─ ${change.type}[${change.index}]: ${change.previousValue} → ${change.currentValue}`);
-    }
-  }
-}
-
-/**
- * Comprehensive render debug logging (level: "all").
- * Captures EVERYTHING available from the React fiber for analysis.
- *
- * This function is called when debugLogLevel is "all".
- * Use this to understand exactly what data is available for render cause detection.
- */
-function logComprehensiveRenderData(nativeTag, fiber, owningComponentFiber, prev, componentCauseResult, batchNativeTags, renderCount) {
-  const componentName = getComponentNameFromFiber(owningComponentFiber) || "Unknown";
-  const nativeType = typeof fiber?.type === "string" ? fiber.type : "Unknown";
-  console.log(`\n[RN-BUOY RENDER DEBUG] ═══════════════════════════════════════`);
-  console.log(`Render #${renderCount} for ${nativeType} (nativeTag: ${nativeTag})`);
-  console.log(`Timestamp: ${new Date().toISOString()}`);
-  console.log(`═══════════════════════════════════════════════════════════════\n`);
-
-  // === NATIVE FIBER (Host Component) ===
-  console.log(`NATIVE FIBER (${nativeType}):`);
-  console.log(`  type: "${fiber?.type}"`);
-  console.log(`  tag: ${fiber?.tag} (${getTagName(fiber?.tag)})`);
-
-  // Use ALTERNATE for previous values (most reliable!)
-  const altFiber = fiber?.alternate;
-  const prevSource = altFiber ? 'alternate' : prev ? 'storage' : 'none';
-  console.log(`  Previous values source: ${prevSource}`);
-
-  // Current and previous children - USE ALTERNATE!
-  const currChildren = fiber?.memoizedProps?.children;
-  const altChildren = altFiber?.memoizedProps?.children;
-  const prevChildren = altChildren !== undefined ? altChildren : prev?.memoizedProps?.children;
-  const childrenChanged = prevChildren !== undefined ? currChildren !== prevChildren : false;
-  console.log(`  memoizedProps.children: ${formatDisplayValue(currChildren)}${childrenChanged ? ` (was: ${formatDisplayValue(prevChildren)})` : prevChildren !== undefined ? ' (unchanged)' : ' (first render)'}`);
-
-  // Style comparison - USE ALTERNATE!
-  const currStyle = fiber?.memoizedProps?.style;
-  const altStyle = altFiber?.memoizedProps?.style;
-  const prevStyle = altStyle !== undefined ? altStyle : prev?.memoizedProps?.style;
-  const styleChanged = prevStyle !== undefined ? currStyle !== prevStyle : false;
-  if (currStyle) {
-    console.log(`  memoizedProps.style: ${JSON.stringify(safeStringify(currStyle, 2))}${styleChanged ? ' (REFERENCE CHANGED)' : ''}`);
-    if (styleChanged && prevStyle) {
-      const valuesEqual = deepEqual(currStyle, prevStyle);
-      console.log(`    └─ Values actually changed: ${!valuesEqual}`);
-    }
-  }
-
-  // All other props
-  console.log(`  All memoizedProps keys: [${Object.keys(fiber?.memoizedProps || {}).join(', ')}]`);
-
-  // Identifying props
-  const testID = fiber?.memoizedProps?.testID;
-  const nativeID = fiber?.memoizedProps?.nativeID;
-  const accessibilityLabel = fiber?.memoizedProps?.accessibilityLabel;
-  if (testID) console.log(`  testID: "${testID}"`);
-  if (nativeID) console.log(`  nativeID: "${nativeID}"`);
-  if (accessibilityLabel) console.log(`  accessibilityLabel: "${accessibilityLabel}"`);
-
-  // Alternate fiber info
-  console.log(`  alternate: ${altFiber ? 'YES' : 'NO'}`);
-  if (altFiber) {
-    console.log(`    alternate.memoizedProps.children: ${formatDisplayValue(altChildren)}`);
-  }
-
-  // Fiber tree structure
-  console.log(`  Tree structure:`);
-  console.log(`    return (parent): ${fiber?.return ? getTagName(fiber.return.tag) : 'null'}`);
-  console.log(`    child: ${fiber?.child ? getTagName(fiber.child.tag) : 'null'}`);
-  console.log(`    sibling: ${fiber?.sibling ? getTagName(fiber.sibling.tag) : 'null'}`);
-  console.log('');
-
-  // === COMPONENT FIBER (React Component) ===
-  console.log(`COMPONENT FIBER (${componentName}):`);
-  if (owningComponentFiber) {
-    console.log(`  name: "${componentName}"`);
-    console.log(`  type: ${typeof owningComponentFiber.type} (${owningComponentFiber.type?.name || owningComponentFiber.type?.displayName || 'anonymous'})`);
-    console.log(`  tag: ${owningComponentFiber.tag} (${getTagName(owningComponentFiber.tag)})`);
-
-    // Component props
-    console.log(`  memoizedProps: ${JSON.stringify(safeStringify(owningComponentFiber.memoizedProps, 2))}`);
-
-    // Check ALTERNATE fiber (React's built-in previous state!)
-    console.log(`  alternate: ${owningComponentFiber.alternate ? 'YES' : 'NO'}`);
-    if (owningComponentFiber.alternate) {
-      console.log(`  ALTERNATE memoizedProps: ${JSON.stringify(safeStringify(owningComponentFiber.alternate.memoizedProps, 2))}`);
-      const altPropsChanged = !shallowEqual(owningComponentFiber.alternate.memoizedProps, owningComponentFiber.memoizedProps);
-      console.log(`  Props changed (vs alternate): ${altPropsChanged ? 'YES' : 'NO'}`);
-
-      // Check state via alternate
-      console.log(`  ALTERNATE memoizedState: ${owningComponentFiber.alternate.memoizedState === owningComponentFiber.memoizedState ? 'SAME' : 'DIFFERENT'}`);
-    }
-
-    // Previous component state (from WeakMap - for comparison)
-    const compPrev = getComponentFiberPrevState(owningComponentFiber);
-    if (compPrev) {
-      console.log(`  WeakMap PREVIOUS memoizedProps: ${JSON.stringify(safeStringify(compPrev.memoizedProps, 2))}`);
-      const propsChanged = !shallowEqual(compPrev.memoizedProps, owningComponentFiber.memoizedProps);
-      console.log(`  Props changed (vs WeakMap): ${propsChanged ? 'YES' : 'NO'}`);
-    } else {
-      console.log(`  WeakMap PREVIOUS state: (not found - first render or WeakMap cleared)`);
-    }
-
-    // Debug owner chain
-    if (owningComponentFiber._debugOwner) {
-      const ownerName = getComponentNameFromFiber(owningComponentFiber._debugOwner);
-      console.log(`  _debugOwner: "${ownerName}"`);
-
-      // Walk up owner chain
-      let owner = owningComponentFiber._debugOwner;
-      let depth = 1;
-      while (owner && depth < 5) {
-        const name = getComponentNameFromFiber(owner);
-        console.log(`    └─[${depth}] ${name || 'unknown'} (tag: ${owner.tag})`);
-        owner = owner._debugOwner;
-        depth++;
-      }
-    }
-
-    // How far we walked to find this component
-    let walkDepth = 0;
-    let walker = fiber._debugOwner || fiber.return;
-    while (walker && walker !== owningComponentFiber && walkDepth < 30) {
-      walker = walker.return;
-      walkDepth++;
-    }
-    console.log(`  Depth from native fiber: ${walkDepth}`);
-  } else {
-    console.log(`  (No component fiber found - could not walk up tree)`);
-  }
-  console.log('');
-
-  // === HOOKS (For Function Components) ===
-  console.log(`HOOKS:`);
-  if (owningComponentFiber?.memoizedState) {
-    const hooks = extractHookStates(owningComponentFiber);
-
-    // Try to get previous hooks from ALTERNATE fiber first (more reliable!)
-    const alternateHooks = owningComponentFiber.alternate ? extractHookStates(owningComponentFiber.alternate) : null;
-
-    // Fall back to WeakMap storage
-    const compPrev = getComponentFiberPrevState(owningComponentFiber);
-    const prevHooks = alternateHooks || compPrev?.extractedHooks;
-    const prevSource = alternateHooks ? 'alternate' : compPrev ? 'WeakMap' : 'none';
-    if (hooks && hooks.length > 0) {
-      console.log(`  Total hooks: ${hooks.length}`);
-      console.log(`  Previous values source: ${prevSource}`);
-      hooks.forEach((hook, i) => {
-        const prevHook = prevHooks?.[i];
-        const changed = prevHook ? prevHook.rawState !== hook.rawState : false;
-        const prevValue = prevHook ? formatDisplayValue(prevHook.value) : 'N/A';
-        const marker = changed ? ' ← CHANGED' : '';
-        console.log(`  [${i}] ${hook.type}: ${formatDisplayValue(hook.value)}${prevHook ? ` (was: ${prevValue})` : ' (first render)'}${marker}`);
-      });
-    } else {
-      console.log(`  (Could not extract hooks - memoizedState structure not recognized)`);
-      console.log(`  Raw memoizedState type: ${typeof owningComponentFiber.memoizedState}`);
-      console.log(`  Has 'next' property: ${'next' in (owningComponentFiber.memoizedState || {})}`);
-      console.log(`  Has 'queue' property: ${'queue' in (owningComponentFiber.memoizedState || {})}`);
-    }
-  } else {
-    console.log(`  (No memoizedState - class component, no hooks, or not a function component)`);
-  }
-  console.log('');
-
-  // === RAW HOOKS DATA (for deep debugging) ===
-  console.log(`RAW HOOKS DATA:`);
-  if (owningComponentFiber?.memoizedState && typeof owningComponentFiber.memoizedState === 'object') {
-    let hookState = owningComponentFiber.memoizedState;
-    let hookIndex = 0;
-    while (hookState && hookIndex < 10) {
-      console.log(`  Hook[${hookIndex}]:`);
-      console.log(`    memoizedState: ${safeStringify(hookState.memoizedState, 2)}`);
-      console.log(`    baseState: ${safeStringify(hookState.baseState, 2)}`);
-      console.log(`    queue: ${hookState.queue ? '[Queue present]' : 'null'}`);
-      console.log(`    next: ${hookState.next ? '[Next hook]' : 'null'}`);
-      hookState = hookState.next;
-      hookIndex++;
-    }
-    if (hookIndex === 0) {
-      console.log(`  (memoizedState is not a hooks linked list)`);
-    }
-  }
-  console.log('');
-
-  // === DETECTION RESULTS ===
-  console.log(`DETECTION RESULTS:`);
-  console.log(`  Component Cause: ${componentCauseResult.cause.toUpperCase()}`);
-  if (componentCauseResult.hookChanges && componentCauseResult.hookChanges.length > 0) {
-    console.log(`  Hook Changes Detected:`);
-    componentCauseResult.hookChanges.forEach(change => {
-      console.log(`    [${change.index}] ${change.type}: ${change.previousValue} → ${change.currentValue}`);
-      if (change.description) {
-        console.log(`         ${change.description}`);
-      }
-    });
-  }
-
-  // What our prop detection would find
-  const nativeType2 = typeof fiber?.type === "string" ? fiber.type : undefined;
-  const changedProps = getChangedKeys(prev?.memoizedProps, fiber?.memoizedProps, nativeType2);
-  if (changedProps && changedProps.length > 0) {
-    console.log(`  Native Props Changed: [${changedProps.join(', ')}]`);
-  } else if (prev) {
-    console.log(`  Native Props Changed: (none detected)`);
-  }
-  console.log('');
-
-  // === BATCH CONTEXT ===
-  console.log(`BATCH CONTEXT:`);
-  console.log(`  Batch size: ${batchNativeTags.size}`);
-  console.log(`  All tags in batch: [${Array.from(batchNativeTags).slice(0, 20).join(', ')}${batchNativeTags.size > 20 ? '...' : ''}]`);
-  const parentTag = getParentNativeTag(fiber);
-  const parentInBatch = parentTag !== null && batchNativeTags.has(parentTag);
-  console.log(`  Parent nativeTag: ${parentTag ?? 'not found'}`);
-  console.log(`  Parent in batch: ${parentInBatch ? 'YES' : 'NO'}`);
-
-  // Walk up to find parent components in batch
-  if (batchNativeTags.size > 1) {
-    console.log(`  Components in same batch:`);
-    let parent = fiber?.return;
-    let depth = 0;
-    while (parent && depth < 10) {
-      const parentNT = getNativeTagFromStateNode(parent.stateNode);
-      if (parentNT !== null && batchNativeTags.has(parentNT)) {
-        const parentName = getComponentNameFromFiber(parent) || parent.type;
-        console.log(`    [depth ${depth}] ${parentName} (tag: ${parentNT})`);
-      }
-      parent = parent.return;
-      depth++;
-    }
-  }
-  console.log(`\n═══════════════════════════════════════════════════════════════\n`);
-}
-
-/**
- * Detect why a component rendered
- *
- * @param nativeTag - The native tag of the component
- * @param fiber - The React fiber object (host fiber)
- * @param batchNativeTags - Set of all nativeTags in this render batch (for parent detection)
- * @param debugLogLevel - Debug logging level: "off" | "minimal" | "verbose" | "all"
- * @returns RenderCause object describing why the component rendered
- */
-export function detectRenderCause(nativeTag, fiber, batchNativeTags, debugLogLevel = "off") {
-  const now = Date.now();
-  if (!fiber) {
-    return {
-      type: "unknown",
-      timestamp: now
-    };
-  }
-
-  // STRATEGY: React's double-buffering means fiber and fiber.alternate swap roles each render.
-  // The `internalInstanceHandle` we receive may point to either the "current" (just committed)
-  // or the "workInProgress" (about to be committed) fiber depending on timing.
-  //
-  // To reliably get current vs previous:
-  // 1. Check our stored previous state by nativeTag (we store AFTER each detection)
-  // 2. The current fiber's memoizedProps should be DIFFERENT from stored previous
-  // 3. If they're the same, we're looking at the alternate (need to swap)
-  //
-  // Detection: If fiber.memoizedProps === storedPrev.memoizedProps, we got the wrong fiber!
-
-  let currentFiber = fiber;
-  let alternateFiber = fiber.alternate;
-
-  // Check if we need to swap fiber and alternate
-  // This happens due to React's double-buffering - we might get the "old" fiber
-  const storedPrev = previousStates.get(nativeTag);
-  if (storedPrev && alternateFiber) {
-    // Detection strategy: Compare children values to determine which fiber is "current"
-    // The fiber with the DIFFERENT children value from stored is the NEW (current) fiber
-    // The fiber with the SAME children value as stored is the OLD (alternate) fiber
-    const storedChildren = storedPrev.memoizedProps?.children;
-    const fiberChildren = fiber.memoizedProps?.children;
-    const altChildren = alternateFiber.memoizedProps?.children;
-
-    // Check by reference first (fastest), then by value for primitives
-    const fiberMatchesStored = fiber.memoizedProps === storedPrev.memoizedProps || storedChildren !== undefined && fiberChildren === storedChildren;
-    const altMatchesStored = alternateFiber.memoizedProps === storedPrev.memoizedProps || storedChildren !== undefined && altChildren === storedChildren;
-
-    // If fiber matches stored but alternate doesn't, fiber is OLD - swap!
-    if (fiberMatchesStored && !altMatchesStored) {
-      currentFiber = alternateFiber;
-      alternateFiber = fiber;
-      if (debugLogLevel === "all") {
-        console.log(`[RenderCause] Detected fiber swap - using alternate as current`);
-      }
-    }
-  }
-
-  // Get previous state from alternate fiber first, fall back to our Map
-  let prevMemoizedProps = null;
-  let prevMemoizedState = null;
-  if (alternateFiber) {
-    // Alternate fiber available - use it directly (most reliable!)
-    prevMemoizedProps = alternateFiber.memoizedProps;
-    prevMemoizedState = alternateFiber.memoizedState;
-  } else {
-    // Fall back to our Map storage (first render won't have alternate)
-    if (storedPrev) {
-      prevMemoizedProps = storedPrev.memoizedProps;
-      prevMemoizedState = storedPrev.memoizedState;
-    }
-  }
-
-  // Build prev object for compatibility with existing code
-  const prev = prevMemoizedProps !== null ? {
-    memoizedProps: prevMemoizedProps,
-    memoizedState: prevMemoizedState,
-    timestamp: now
-  } : undefined;
-  const current = {
-    memoizedProps: currentFiber.memoizedProps,
-    memoizedState: currentFiber.memoizedState,
-    timestamp: now
-  };
-
-  // Store current state for next comparison (as fallback for edge cases)
-  updateStoredState(nativeTag, current);
-
-  // Get the owning React component for two-level causation
-  // Use currentFiber to ensure we walk up from the correct fiber
-  const owningComponentFiber = getOwningComponentFiber(currentFiber);
-  const componentName = getComponentNameFromFiber(owningComponentFiber) || undefined;
-
-  // Get parent component name for cascade visualization
-  const parentComponentName = getParentComponentName(currentFiber, componentName) || undefined;
-
-  // Phase 3: detectComponentCause now returns both cause and hook changes
-  const componentCauseResult = detectComponentCause(owningComponentFiber);
-  const componentCause = componentCauseResult.cause;
-  const componentHookChanges = componentCauseResult.hookChanges;
-
-  // First mount detection - no alternate fiber AND no stored state
-  if (!prev) {
-    // Log mount event if logging is enabled
-    if (debugLogLevel !== "off") {
-      if (debugLogLevel === "minimal") {
-        console.log(`[${componentName || 'Unknown'}] MOUNT`);
-      } else if (debugLogLevel === "verbose") {
-        const nativeType = typeof currentFiber?.type === "string" ? currentFiber.type : "Unknown";
-        console.log(`[RENDER] ${componentName || 'Unknown'} (${nativeType}:${nativeTag}) | Cause: MOUNT`);
-      } else if (debugLogLevel === "all") {
-        const renderCount = previousStates.has(nativeTag) ? previousStates.size : 1;
-        logComprehensiveRenderData(nativeTag, currentFiber, owningComponentFiber, prev, componentCauseResult, batchNativeTags, renderCount);
-      }
-    }
-    return {
-      type: "mount",
-      timestamp: now,
-      componentCause: "mount",
-      // Override - if native is mount, component is too
-      componentName
-    };
-  }
-
-  // Get the native component type for component-specific prop handling
-  // currentFiber.type is the native component name (e.g., "RCTText", "RCTView")
-  const nativeType = typeof currentFiber.type === "string" ? currentFiber.type : undefined;
-
-  // Props change detection (native view props)
-  // Pass nativeType so we can handle component-specific props (e.g., children for Text)
-  const changedProps = getChangedKeys(prev.memoizedProps, current.memoizedProps, nativeType);
-
-  // Debug logging based on level (for non-mount renders)
-  if (debugLogLevel !== "off") {
-    if (debugLogLevel === "minimal") {
-      // Only log if there are hook changes
-      logMinimal(componentName, componentCauseResult);
-    } else if (debugLogLevel === "verbose") {
-      logVerbose(nativeTag, currentFiber, owningComponentFiber, componentCauseResult, changedProps);
-    } else if (debugLogLevel === "all") {
-      const renderCount = previousStates.has(nativeTag) ? previousStates.size : 1;
-      logComprehensiveRenderData(nativeTag, currentFiber, owningComponentFiber, prev, componentCauseResult, batchNativeTags, renderCount);
-    }
-  }
-  if (changedProps && changedProps.length > 0) {
-    return {
-      type: "props",
-      changedKeys: changedProps.slice(0, MAX_CHANGED_KEYS),
-      timestamp: now,
-      componentCause,
-      componentName,
-      parentComponentName,
-      // Phase 3: Include hook changes when component cause is state
-      hookChanges: componentHookChanges || undefined
-    };
-  }
-
-  // Hooks/State change detection (host fiber's hooks - usually none for host components)
-  const nativeHookChanges = detectHookChanges(prev.memoizedState, current.memoizedState);
-  if (nativeHookChanges && nativeHookChanges.length > 0) {
-    return {
-      type: "hooks",
-      hookIndices: nativeHookChanges,
-      timestamp: now,
-      componentCause,
-      componentName,
-      parentComponentName,
-      // Phase 3: Include hook changes when component cause is state
-      hookChanges: componentHookChanges || undefined
-    };
-  }
-
-  // Parent re-rendered detection
-  // Check if parent fiber's nativeTag is also in this batch
-  const parentNativeTag = getParentNativeTag(currentFiber);
-  if (parentNativeTag && batchNativeTags.has(parentNativeTag)) {
-    return {
-      type: "parent",
-      timestamp: now,
-      componentCause,
-      componentName,
-      parentComponentName,
-      hookChanges: componentHookChanges || undefined
-    };
-  }
-
-  // If we couldn't detect native-level cause, fall back to component cause
-  // This handles cases where the component re-rendered due to state but
-  // the native view props didn't change (or changed in undetectable ways)
-  if (componentCause === "state") {
-    return {
-      type: "state",
-      timestamp: now,
-      componentCause,
-      componentName,
-      parentComponentName,
-      // Phase 3: Include hook changes for state-caused renders
-      hookChanges: componentHookChanges || undefined
-    };
-  }
-  if (componentCause === "props") {
-    return {
-      type: "props",
-      timestamp: now,
-      componentCause,
-      componentName,
-      parentComponentName
-    };
-  }
-  if (componentCause === "parent") {
-    return {
-      type: "parent",
-      timestamp: now,
-      componentCause,
-      componentName,
-      parentComponentName
-    };
-  }
-  return {
-    type: "unknown",
-    timestamp: now,
-    componentCause,
-    componentName,
-    parentComponentName
-  };
-}
-
-/**
- * Shallow compare object keys to find changes
- * Returns array of changed key names
- *
- * @param prev - Previous props object
- * @param next - Current props object
- * @param fiberType - Native component type (e.g., "RCTText", "RCTView")
- *                    Used to determine which props are meaningful to track
- *
- * COMPONENT-SPECIFIC HANDLING:
- * - RCTText/RCTVirtualText: `children` IS the text content, always track it
- * - RCTView: `children` is React elements, skip it
- * - RCTImageView: `source` is important, track it
- *
- * See: COMPONENT_PROP_CONFIGS for full configuration
- */
-function getChangedKeys(prev, next, fiberType) {
-  // Same reference = no changes
-  if (prev === next) return null;
-
-  // Handle null/undefined cases
-  if (!prev || !next) return null;
-  if (typeof prev !== "object" || typeof next !== "object") return null;
-
-  // Handle arrays (props shouldn't be arrays, but just in case)
-  if (Array.isArray(prev) || Array.isArray(next)) return null;
-
-  // Get component-specific prop configuration
-  const propConfig = getComponentPropConfig(fiberType);
-  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
-  const changed = [];
-  for (const key of allKeys) {
-    // Skip internal React props
-    if (key.startsWith("__")) continue;
-
-    // Check if this key should be skipped for this component type
-    if (propConfig.skip.includes(key)) continue;
-
-    // For `children` prop, use component-specific rules
-    if (key === "children") {
-      // Only track children if component config says to (e.g., RCTText)
-      if (!propConfig.alwaysTrack.includes("children")) {
-        continue; // Skip children for most components
-      }
-
-      // For Text components, compare children values
-      // Children can be string, number, or array of mixed content
-      const prevChildren = prev[key];
-      const nextChildren = next[key];
-      if (prevChildren !== nextChildren) {
-        // Format the change nicely for display
-        if (isPrimitive(prevChildren) && isPrimitive(nextChildren)) {
-          // Show the actual value change: "children: 6 → 4"
-          changed.push(`children: ${formatValue(prevChildren)} → ${formatValue(nextChildren)}`);
-        } else {
-          // Complex children (arrays, objects) - just note it changed
-          changed.push("children (content)");
-        }
-      }
-      continue;
-    }
-
-    // Standard shallow comparison for other props
-    if (prev[key] !== next[key]) {
-      // Phase 4: For object props like style, check if it's a reference-only change
-      const prevVal = prev[key];
-      const nextVal = next[key];
-      if (key === "style") {
-        // Style can be an object, array, or array with falsy values
-        // Deep compare to see if values actually changed
-        if (deepEqual(prevVal, nextVal)) {
-          // Reference changed but values are the same - mark as ref-only
-          changed.push(`${key} (ref only)`);
-        } else {
-          // Values actually changed
-          changed.push(key);
-        }
-      } else if (typeof prevVal === "function" && typeof nextVal === "function") {
-        // Functions are often recreated - note this for potential useCallback suggestion
-        changed.push(`${key} (fn ref)`);
-      } else {
-        changed.push(key);
-      }
-    }
-  }
-  return changed.length > 0 ? changed : null;
-}
-
-/**
- * Check if a value is a plain object (not array, null, or class instance)
- */
-function isPlainObject(value) {
-  if (value === null || typeof value !== "object") return false;
-  if (Array.isArray(value)) return false;
-  // Check if it's a plain object (not a class instance)
-  const proto = Object.getPrototypeOf(value);
-  return proto === Object.prototype || proto === null;
-}
-
-/**
- * Deep equality check for objects (used for style comparison)
- * Returns true if objects have the same values
- */
-function deepEqual(obj1, obj2, depth = 0) {
-  // Prevent infinite recursion
-  if (depth > 5) return false;
-
-  // Same reference
-  if (obj1 === obj2) return true;
-
-  // Type check
-  if (typeof obj1 !== typeof obj2) return false;
-
-  // Primitives
-  if (typeof obj1 !== "object" || obj1 === null || obj2 === null) {
-    return obj1 === obj2;
-  }
-
-  // Arrays
-  if (Array.isArray(obj1) !== Array.isArray(obj2)) return false;
-  if (Array.isArray(obj1)) {
-    if (obj1.length !== obj2.length) return false;
-    for (let i = 0; i < obj1.length; i++) {
-      if (!deepEqual(obj1[i], obj2[i], depth + 1)) return false;
-    }
-    return true;
-  }
-
-  // Objects
-  const keys1 = Object.keys(obj1);
-  const keys2 = Object.keys(obj2);
-  if (keys1.length !== keys2.length) return false;
-  for (const key of keys1) {
-    if (!keys2.includes(key)) return false;
-    if (!deepEqual(obj1[key], obj2[key], depth + 1)) return false;
-  }
-  return true;
-}
-
-/**
- * Check if a value is a primitive (string, number, boolean, null, undefined)
- */
-function isPrimitive(value) {
-  return value === null || value === undefined || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
-}
-
-/**
- * Format a value for display in change messages
- */
-function formatValue(value) {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (typeof value === "string") {
-    // Truncate long strings
-    return value.length > 20 ? `"${value.slice(0, 20)}..."` : `"${value}"`;
-  }
-  if (typeof value === "number") return String(value);
-  if (typeof value === "boolean") return String(value);
-  return "[object]";
-}
-
-/**
- * Detect which hooks changed by walking the linked list
- * Returns array of hook indices that changed
- */
-function detectHookChanges(prevState, nextState) {
-  // Same reference = no changes
-  if (prevState === nextState) return null;
-
-  // If either is null/undefined, can't compare
-  if (prevState == null || nextState == null) return null;
-
-  // Check if this looks like a hooks linked list
-  // Hooks have a 'next' property forming a linked list
-  if (typeof prevState !== "object" || typeof nextState !== "object") {
-    return null;
-  }
-  const changes = [];
-  let prevHook = prevState;
-  let nextHook = nextState;
-  let index = 0;
-
-  // Walk the hooks linked list
-  while (nextHook !== null && index < MAX_HOOK_DEPTH) {
-    if (prevHook === null) {
-      // New hook added (shouldn't happen normally, but handle it)
-      changes.push(index);
-    } else if (didHookChange(prevHook, nextHook)) {
-      changes.push(index);
-    }
-
-    // Move to next hook in list
-    nextHook = nextHook?.next ?? null;
-    prevHook = prevHook?.next ?? null;
-    index++;
-  }
-  return changes.length > 0 ? changes : null;
-}
-
-/**
- * Check if a single hook changed
- */
-function didHookChange(prev, next) {
-  if (prev === next) return false;
-
-  // Check memoizedState (useState, useReducer, useMemo, useCallback, useRef)
-  if (prev.memoizedState !== next.memoizedState) {
-    return true;
-  }
-
-  // Check baseState (useReducer specific)
-  if (prev.baseState !== undefined && prev.baseState !== next.baseState) {
-    return true;
-  }
-  return false;
-}
-
-/**
- * Get the nativeTag of the nearest parent host component
- */
-function getParentNativeTag(fiber) {
-  let parent = fiber?.return;
-  let depth = 0;
-  while (parent && depth < MAX_PARENT_DEPTH) {
-    // Check if this is a host component with a stateNode
-    if (parent.stateNode) {
-      const tag = getNativeTagFromStateNode(parent.stateNode);
-      if (tag != null) return tag;
-    }
-    parent = parent.return;
-    depth++;
-  }
-  return null;
-}
-
-/**
- * Get the parent React component name for cascade visualization.
- * Walks up the fiber tree to find the nearest user-defined component
- * that is DIFFERENT from the current component.
- */
-function getParentComponentName(fiber, currentComponentName) {
-  if (!fiber) return null;
-
-  // Start from the owning component's parent
-  const owningFiber = getOwningComponentFiber(fiber);
-  if (!owningFiber) return null;
-  let parent = owningFiber.return;
-  let depth = 0;
-  while (parent && depth < MAX_PARENT_DEPTH) {
-    const tag = parent.tag;
-
-    // Tags: 0=FunctionComponent, 1=ClassComponent, 11=ForwardRef, 15=SimpleMemoComponent
-    if (tag === 0 || tag === 1 || tag === 11 || tag === 15) {
-      const name = getComponentNameFromFiber(parent);
-
-      // Skip internal React components and same-name components
-      if (name && !isInternalComponentName(name) && name !== currentComponentName) {
-        return name;
-      }
-    }
-    parent = parent.return;
-    depth++;
-  }
-  return null;
-}
-
-/**
- * Extract nativeTag from various stateNode formats
- */
-function getNativeTagFromStateNode(stateNode) {
-  if (!stateNode) return null;
-
-  // Direct __nativeTag (Fabric)
-  if (typeof stateNode.__nativeTag === "number") {
-    return stateNode.__nativeTag;
-  }
-
-  // Direct _nativeTag (Legacy/Paper)
-  if (typeof stateNode._nativeTag === "number") {
-    return stateNode._nativeTag;
-  }
-
-  // Fabric canonical path
-  if (typeof stateNode.canonical?.__nativeTag === "number") {
-    return stateNode.canonical.__nativeTag;
-  }
-
-  // Public instance path
-  if (typeof stateNode.canonical?.publicInstance?.__nativeTag === "number") {
-    return stateNode.canonical.publicInstance.__nativeTag;
-  }
-  return null;
-}
-
-/**
- * Update stored state with automatic cleanup when limit is reached
- */
-function updateStoredState(nativeTag, state) {
-  // Enforce max limit - remove oldest 25% when full
-  if (previousStates.size >= MAX_STORED_STATES) {
-    const entries = Array.from(previousStates.entries());
-    // Sort by timestamp (oldest first)
-    entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
-
-    // Remove oldest 25%
-    const removeCount = Math.floor(MAX_STORED_STATES / 4);
-    for (let i = 0; i < removeCount; i++) {
-      previousStates.delete(entries[i][0]);
-    }
-  }
-  previousStates.set(nativeTag, state);
-}
-
-/**
- * Clear all stored states
- * Call this when tracking is disabled to prevent memory leaks
- */
-export function clearRenderCauseState() {
-  previousStates.clear();
-}
-
-/**
- * Remove a specific component from state storage
- * Useful when a component is unmounted
- */
-export function removeRenderCauseState(nativeTag) {
-  previousStates.delete(nativeTag);
-}
-
-/**
- * Get storage stats for debugging/display
- */
-export function getRenderCauseStats() {
-  return {
-    storedStates: previousStates.size,
-    maxStates: MAX_STORED_STATES
-  };
-}
-
-// === Props/State Snapshot Capture for History ===
-
-// Max depth for cloning nested objects
-const MAX_CLONE_DEPTH = 5;
-// Max string length for values
-const MAX_STRING_LENGTH = 200;
-// Max array items to include
-const MAX_ARRAY_ITEMS = 20;
-// Max object keys to include
-const MAX_OBJECT_KEYS = 30;
-
-/**
- * Safely clone props/state for history storage.
- * Handles circular references, functions, and large objects.
- */
-export function safeCloneForHistory(value, depth = 0, seen = new WeakSet()) {
-  // Handle primitives
-  if (value === null || value === undefined) return value;
-  if (typeof value === "boolean" || typeof value === "number") return value;
-
-  // Handle strings (truncate long ones)
-  if (typeof value === "string") {
-    return value.length > MAX_STRING_LENGTH ? value.slice(0, MAX_STRING_LENGTH) + "..." : value;
-  }
-
-  // Handle functions - show name or placeholder
-  if (typeof value === "function") {
-    return `[Function: ${value.name || "anonymous"}]`;
-  }
-
-  // Handle symbols
-  if (typeof value === "symbol") {
-    return `[Symbol: ${value.description || ""}]`;
-  }
-
-  // Stop at max depth
-  if (depth >= MAX_CLONE_DEPTH) {
-    if (Array.isArray(value)) return `[Array: ${value.length} items]`;
-    if (typeof value === "object") {
-      const keys = Object.keys(value);
-      return `[Object: ${keys.length} keys]`;
-    }
-    return "[...]";
-  }
-
-  // Handle circular references
-  if (typeof value === "object") {
-    if (seen.has(value)) {
-      return "[Circular]";
-    }
-    seen.add(value);
-  }
-
-  // Handle arrays
-  if (Array.isArray(value)) {
-    const cloned = value.slice(0, MAX_ARRAY_ITEMS).map(item => safeCloneForHistory(item, depth + 1, seen));
-    if (value.length > MAX_ARRAY_ITEMS) {
-      cloned.push(`[...${value.length - MAX_ARRAY_ITEMS} more]`);
-    }
-    return cloned;
-  }
-
-  // Handle Date
-  if (value instanceof Date) {
-    return value.toISOString();
-  }
-
-  // Handle Error
-  if (value instanceof Error) {
-    return `[Error: ${value.message}]`;
-  }
-
-  // Handle RegExp
-  if (value instanceof RegExp) {
-    return value.toString();
-  }
-
-  // Handle Map
-  if (value instanceof Map) {
-    const obj = {
-      __type: "Map",
-      __size: value.size
-    };
-    let count = 0;
-    for (const [k, v] of value) {
-      if (count >= MAX_OBJECT_KEYS) {
-        obj[`...${value.size - count} more`] = true;
-        break;
-      }
-      const key = typeof k === "string" ? k : String(k);
-      obj[key] = safeCloneForHistory(v, depth + 1, seen);
-      count++;
-    }
-    return obj;
-  }
-
-  // Handle Set
-  if (value instanceof Set) {
-    return {
-      __type: "Set",
-      __size: value.size,
-      values: Array.from(value).slice(0, MAX_ARRAY_ITEMS).map(item => safeCloneForHistory(item, depth + 1, seen))
-    };
-  }
-
-  // Handle plain objects
-  if (typeof value === "object") {
-    const cloned = {};
-    const keys = Object.keys(value);
-    const keysToClone = keys.slice(0, MAX_OBJECT_KEYS);
-    for (const key of keysToClone) {
-      // Skip internal React props
-      if (key.startsWith("__") || key === "children") continue;
-      try {
-        cloned[key] = safeCloneForHistory(value[key], depth + 1, seen);
-      } catch {
-        cloned[key] = "[Error accessing property]";
-      }
-    }
-    if (keys.length > MAX_OBJECT_KEYS) {
-      cloned[`...${keys.length - MAX_OBJECT_KEYS} more keys`] = true;
-    }
-    return cloned;
-  }
-  return "[Unknown type]";
-}
-
-/**
- * Capture props snapshot from a fiber for history storage
- */
-export function capturePropsSnapshot(fiber) {
-  if (!fiber?.memoizedProps) return undefined;
-  return safeCloneForHistory(fiber.memoizedProps);
-}
-
-/**
- * Capture state snapshot from a fiber for history storage
- * For function components, this walks the hooks linked list
- */
-export function captureStateSnapshot(fiber) {
-  if (!fiber?.memoizedState) return undefined;
-  const state = fiber.memoizedState;
-
-  // Check if it's a hooks linked list (has 'next' property)
-  if (typeof state === "object" && state !== null && "next" in state) {
-    // It's a hooks list - extract hook values
-    const hooks = [];
-    let current = state;
-    let index = 0;
-    while (current && index < MAX_HOOK_DEPTH) {
-      hooks.push({
-        index,
-        memoizedState: safeCloneForHistory(current.memoizedState)
-      });
-      current = current.next;
-      index++;
-    }
-    return {
-      __type: "Hooks",
-      hooks
-    };
-  }
-
-  // It's a regular state object (class component or simple state)
-  return safeCloneForHistory(state);
-}
+"use strict";import{hookStateChanged}from"./ownStateChanged";const COMPONENT_PROP_CONFIGS={RCTText:{alwaysTrack:["children"],skip:[],description:"Text component - children is the displayed content"},RCTVirtualText:{alwaysTrack:["children"],skip:[],description:"Virtual Text (nested) - children is the displayed content"},RCTView:{alwaysTrack:[],skip:["children"],description:"View container - children are React elements"},RCTImageView:{alwaysTrack:["source"],skip:["children"],description:"Image - source contains the image URL/require"},RCTTextInput:{alwaysTrack:["value","defaultValue"],skip:["children"],description:"TextInput - value is the input content"},RCTSwitch:{alwaysTrack:["value"],skip:["children"],description:"Switch - value is the toggle state"},default:{alwaysTrack:[],skip:["children"],description:"Unknown component type"}};function getComponentPropConfig(e){return e&&COMPONENT_PROP_CONFIGS[e]||COMPONENT_PROP_CONFIGS.default}const componentFiberStates=new WeakMap;function getComponentFiberPrevState(e){if(!e)return;let o=componentFiberStates.get(e);return o||(e.alternate&&(o=componentFiberStates.get(e.alternate),o)?o:void 0)}function setComponentFiberState(e,o){e&&(componentFiberStates.set(e,o),e.alternate&&componentFiberStates.set(e.alternate,o))}const previousStates=new Map,MAX_STORED_STATES=500,MAX_CHANGED_KEYS=10,MAX_HOOK_DEPTH=50,MAX_PARENT_DEPTH=50,INTERNAL_COMPONENT_NAMES=new Set(["View","Text","TextImpl","Image","ScrollView","FlatList","SectionList","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","TextInput","Switch","ActivityIndicator","Modal","StatusBar","KeyboardAvoidingView","AnimatedComponent","AnimatedComponentWrapper","Fragment","Suspense","Provider","Consumer","Context","ForwardRef","Unknown","Component"]);function isInternalComponentName(e){return!e||!!INTERNAL_COMPONENT_NAMES.has(e)||!!e.startsWith("Animated")}function getOwningComponentFiber(e){if(!e)return null;let o=e._debugOwner||e.return,t=0,n=null;for(;o&&t<30;){const e=o.tag;if((0===e||1===e||11===e||15===e)&&(n||(n=o),!isInternalComponentName(getComponentNameFromFiber(o))))return o;o=o.return,t++}return n}function getComponentNameFromFiber(e){if(!e)return null;const o=e.type;if(o){if("string"==typeof o)return o;if(o.name)return o.name;if(o.displayName)return o.displayName}return null}function detectHookType(e){if(!e||"object"!=typeof e)return"unknown";if(null!==e.queue&&void 0!==e.queue)return"useState";const o=e.memoizedState;if(null!==o&&"object"==typeof o&&!Array.isArray(o)&&"current"in o&&1===Object.keys(o).length)return"useRef";if(Array.isArray(o)&&2===o.length){const[,e]=o;if(Array.isArray(e)||null===e)return"function"==typeof o[0]?"useCallback":"useMemo"}return null!==o&&"object"==typeof o&&!Array.isArray(o)&&("tag"in o||"create"in o||"destroy"in o)?"useEffect":"unknown"}function extractHookValue(e,o){const t=e?.memoizedState;switch(o){case"useState":case"useReducer":default:return t;case"useRef":return t?.current;case"useMemo":case"useCallback":return Array.isArray(t)?t[0]:t;case"useEffect":return"[effect]"}}function extractHookStates(e){if(!e?.memoizedState)return null;const o=e.memoizedState;if("object"!=typeof o||null===o)return null;if(!("next"in o)&&!("queue"in o)&&!("memoizedState"in o))return null;const t=[];let n=o,r=0;for(;null!==n&&r<50;){const e=detectHookType(n),o=extractHookValue(n,e);t.push({index:r,type:e,value:o,rawState:n.memoizedState}),n=n.next,r++}return t.length>0?t:null}function compareHookStates(e,o){if(!e||!o)return null;const t=[],n=Math.max(e.length,o.length);for(let r=0;r<n;r++){const n=e[r],a=o[r];if(n||!a)if(!n||a){if(n&&a){if(n.rawState===a.rawState)continue;if("useEffect"===a.type)continue;if("useMemo"===a.type||"useCallback"===a.type)continue;if("useState"===a.type||"useReducer"===a.type||"useRef"===a.type){const e=formatHookValue(n.value,n.type),o=formatHookValue(a.value,a.type);t.push({index:r,type:a.type,previousValue:e,currentValue:o,description:`${e} → ${o}`})}}}else t.push({index:r,type:n.type,previousValue:formatHookValue(n.value,n.type),description:`Hook[${r}] removed`});else t.push({index:r,type:a.type,currentValue:formatHookValue(a.value,a.type),description:`Hook[${r}] added`})}return t.length>0?t:null}function formatHookValue(e,o){return formatDisplayValue(e)}function formatDisplayValue(e){return null===e?null:void 0!==e?"boolean"==typeof e||"number"==typeof e?e:"string"==typeof e?e.length>30?e.slice(0,30)+"...":e:"function"==typeof e?`[Function: ${e.name||"anonymous"}]`:Array.isArray(e)?`[Array: ${e.length} items]`:"object"==typeof e?`{Object: ${Object.keys(e).length} keys}`:String(e):void 0}function detectComponentCause(e){if(!e)return{cause:"unknown",hookChanges:null};let o=e,t=e.alternate;const n=getComponentFiberPrevState(e);if(n&&t){const r=extractHookStates(e),a=extractHookStates(t),s=n.extractedHooks;if(r&&a&&s&&s.length>0){const n=s.find(e=>"useState"===e.type);if(n){const s=r.find(e=>e.index===n.index),i=a.find(e=>e.index===n.index);if(s&&i){const r=s.value===n.value,a=i.value===n.value;r&&!a&&(o=t,t=e)}}}}const r=extractHookStates(o);let a=null,s=null,i=null;return t?(a=t.memoizedProps,s=t.memoizedState,i=extractHookStates(t)):n&&(a=n.memoizedProps,s=n.memoizedState,i=n.extractedHooks),setComponentFiberState(o,{memoizedProps:o.memoizedProps,memoizedState:o.memoizedState,extractedHooks:r}),null===a?{cause:"mount",hookChanges:null}:shallowEqual(a,o.memoizedProps)?hookStateChanged(s,o.memoizedState,{isClassComponent:1===o.tag})?{cause:"state",hookChanges:compareHookStates(i,r)}:{cause:"parent",hookChanges:null}:{cause:"props",hookChanges:null}}function shallowEqual(e,o){if(e===o)return!0;if(!e||!o)return!1;if("object"!=typeof e||"object"!=typeof o)return!1;const t=Object.keys(e),n=Object.keys(o);if(t.length!==n.length)return!1;for(const n of t)if(e[n]!==o[n])return!1;return!0}function safeStringify(e,o=3){const t=new WeakSet;return function e(n,r){if(r>o)return"[MAX_DEPTH]";if(null===n)return null;if(void 0===n)return;if("function"==typeof n)return`[Function: ${n.name||"anonymous"}]`;if("symbol"==typeof n)return`[Symbol: ${n.toString()}]`;if("object"!=typeof n)return n;if(t.has(n))return"[Circular]";if(t.add(n),Array.isArray(n))return n.slice(0,10).map(o=>e(o,r+1));const a={},s=Object.keys(n).slice(0,20);for(const o of s)try{a[o]=e(n[o],r+1)}catch{a[o]="[Error accessing]"}return a}(e,0)}function logRawFiberData(e,o,t,n,r,a){const s=getComponentNameFromFiber(t)||"Unknown";if(console.log("\n========================================"),console.log("[RN-BUOY DEBUG] RENDER EVENT"),console.log("========================================"),console.log(`Native Tag: ${e}`),console.log(`Component Name: ${s}`),console.log(`Is First Render: ${!n}`),console.log(`Component Cause Detected: ${a}`),console.log("----------------------------------------"),console.log("\n--- NATIVE FIBER (Host Component) ---"),console.log("fiber.type:",o?.type),console.log("fiber.tag:",o?.tag),console.log("fiber.memoizedProps (CURRENT):",safeStringify(o?.memoizedProps)),console.log("fiber.memoizedState:",safeStringify(o?.memoizedState)),n&&(console.log("PREVIOUS memoizedProps:",safeStringify(n.memoizedProps)),console.log("PREVIOUS memoizedState:",safeStringify(n.memoizedState))),console.log("\n--- COMPONENT FIBER (React Component) ---"),t){console.log("componentFiber.type:",t?.type?.name||t?.type),console.log("componentFiber.tag:",t?.tag),console.log("componentFiber.memoizedProps:",safeStringify(t?.memoizedProps)),console.log("componentFiber.memoizedState:",safeStringify(t?.memoizedState)),console.log("\n--- HOOKS STATE (linked list walk) ---");let e=t?.memoizedState,o=0;for(;e&&o<10;)console.log(`Hook[${o}]:`,safeStringify({memoizedState:e.memoizedState,baseState:e.baseState,queue:e.queue?"[Queue object]":null})),e=e.next,o++;console.log("\n--- EXTRACTED HOOKS (Phase 3) ---");const n=extractHookStates(t);if(n)for(const e of n)console.log(`Hook[${e.index}] (${e.type}):`,formatDisplayValue(e.value));else console.log("(No hooks extracted)")}else console.log("(No component fiber found)");console.log("\n--- CHILDREN/TEXT CONTENT ---");const i=o?.memoizedProps?.children;console.log("children type:",typeof i),console.log("children value:",safeStringify(i)),console.log("\n========================================\n")}function getTagName(e){return void 0===e?"undefined":{0:"FunctionComponent",1:"ClassComponent",2:"IndeterminateComponent",3:"HostRoot",4:"HostPortal",5:"HostComponent",6:"HostText",7:"Fragment",8:"Mode",9:"ContextConsumer",10:"ContextProvider",11:"ForwardRef",12:"Profiler",13:"SuspenseComponent",14:"MemoComponent",15:"SimpleMemoComponent"}[e]||`Unknown(${e})`}function logMinimal(e,o){if(o.hookChanges&&0!==o.hookChanges.length)for(const t of o.hookChanges)console.log(`[${e||"Unknown"}] ${t.type}[${t.index}]: ${t.previousValue} → ${t.currentValue}`)}function logVerbose(e,o,t,n,r){const a=getComponentNameFromFiber(t)||"Unknown",s="string"==typeof o?.type?o.type:"Unknown",{cause:i,hookChanges:l}=n;if(console.log(`[RENDER] ${a} (${s}:${e}) | Cause: ${i.toUpperCase()}`+(r&&r.length>0?` | Props: [${r.join(", ")}]`:"")),l&&l.length>0)for(const e of l)console.log(`  └─ ${e.type}[${e.index}]: ${e.previousValue} → ${e.currentValue}`)}function logComprehensiveRenderData(e,o,t,n,r,a,s){const i=getComponentNameFromFiber(t)||"Unknown",l="string"==typeof o?.type?o.type:"Unknown";console.log("\n[RN-BUOY RENDER DEBUG] ═══════════════════════════════════════"),console.log(`Render #${s} for ${l} (nativeTag: ${e})`),console.log(`Timestamp: ${(new Date).toISOString()}`),console.log("═══════════════════════════════════════════════════════════════\n"),console.log(`NATIVE FIBER (${l}):`),console.log(`  type: "${o?.type}"`),console.log(`  tag: ${o?.tag} (${getTagName(o?.tag)})`);const c=o?.alternate,u=c?"alternate":n?"storage":"none";console.log(`  Previous values source: ${u}`);const m=o?.memoizedProps?.children,p=c?.memoizedProps?.children,f=void 0!==p?p:n?.memoizedProps?.children,g=void 0!==f&&m!==f;console.log(`  memoizedProps.children: ${formatDisplayValue(m)}${g?` (was: ${formatDisplayValue(f)})`:void 0!==f?" (unchanged)":" (first render)"}`);const d=o?.memoizedProps?.style,y=c?.memoizedProps?.style,S=void 0!==y?y:n?.memoizedProps?.style,h=void 0!==S&&d!==S;if(d&&(console.log(`  memoizedProps.style: ${JSON.stringify(safeStringify(d,2))}${h?" (REFERENCE CHANGED)":""}`),h&&S)){const e=deepEqual(d,S);console.log(`    └─ Values actually changed: ${!e}`)}console.log(`  All memoizedProps keys: [${Object.keys(o?.memoizedProps||{}).join(", ")}]`);const C=o?.memoizedProps?.testID,b=o?.memoizedProps?.nativeID,k=o?.memoizedProps?.accessibilityLabel;if(C&&console.log(`  testID: "${C}"`),b&&console.log(`  nativeID: "${b}"`),k&&console.log(`  accessibilityLabel: "${k}"`),console.log("  alternate: "+(c?"YES":"NO")),c&&console.log(`    alternate.memoizedProps.children: ${formatDisplayValue(p)}`),console.log("  Tree structure:"),console.log(`    return (parent): ${o?.return?getTagName(o.return.tag):"null"}`),console.log(`    child: ${o?.child?getTagName(o.child.tag):"null"}`),console.log(`    sibling: ${o?.sibling?getTagName(o.sibling.tag):"null"}`),console.log(""),console.log(`COMPONENT FIBER (${i}):`),t){if(console.log(`  name: "${i}"`),console.log(`  type: ${typeof t.type} (${t.type?.name||t.type?.displayName||"anonymous"})`),console.log(`  tag: ${t.tag} (${getTagName(t.tag)})`),console.log(`  memoizedProps: ${JSON.stringify(safeStringify(t.memoizedProps,2))}`),console.log("  alternate: "+(t.alternate?"YES":"NO")),t.alternate){console.log(`  ALTERNATE memoizedProps: ${JSON.stringify(safeStringify(t.alternate.memoizedProps,2))}`);const e=!shallowEqual(t.alternate.memoizedProps,t.memoizedProps);console.log("  Props changed (vs alternate): "+(e?"YES":"NO")),console.log("  ALTERNATE memoizedState: "+(t.alternate.memoizedState===t.memoizedState?"SAME":"DIFFERENT"))}const e=getComponentFiberPrevState(t);if(e){console.log(`  WeakMap PREVIOUS memoizedProps: ${JSON.stringify(safeStringify(e.memoizedProps,2))}`);const o=!shallowEqual(e.memoizedProps,t.memoizedProps);console.log("  Props changed (vs WeakMap): "+(o?"YES":"NO"))}else console.log("  WeakMap PREVIOUS state: (not found - first render or WeakMap cleared)");if(t._debugOwner){const e=getComponentNameFromFiber(t._debugOwner);console.log(`  _debugOwner: "${e}"`);let o=t._debugOwner,n=1;for(;o&&n<5;){const e=getComponentNameFromFiber(o);console.log(`    └─[${n}] ${e||"unknown"} (tag: ${o.tag})`),o=o._debugOwner,n++}}let n=0,r=o._debugOwner||o.return;for(;r&&r!==t&&n<30;)r=r.return,n++;console.log(`  Depth from native fiber: ${n}`)}else console.log("  (No component fiber found - could not walk up tree)");if(console.log(""),console.log("HOOKS:"),t?.memoizedState){const e=extractHookStates(t),o=t.alternate?extractHookStates(t.alternate):null,n=getComponentFiberPrevState(t),r=o||n?.extractedHooks,a=o?"alternate":n?"WeakMap":"none";e&&e.length>0?(console.log(`  Total hooks: ${e.length}`),console.log(`  Previous values source: ${a}`),e.forEach((e,o)=>{const t=r?.[o],n=!!t&&t.rawState!==e.rawState,a=t?formatDisplayValue(t.value):"N/A",s=n?" ← CHANGED":"";console.log(`  [${o}] ${e.type}: ${formatDisplayValue(e.value)}${t?` (was: ${a})`:" (first render)"}${s}`)})):(console.log("  (Could not extract hooks - memoizedState structure not recognized)"),console.log("  Raw memoizedState type: "+typeof t.memoizedState),console.log(`  Has 'next' property: ${"next"in(t.memoizedState||{})}`),console.log(`  Has 'queue' property: ${"queue"in(t.memoizedState||{})}`))}else console.log("  (No memoizedState - class component, no hooks, or not a function component)");if(console.log(""),console.log("RAW HOOKS DATA:"),t?.memoizedState&&"object"==typeof t.memoizedState){let e=t.memoizedState,o=0;for(;e&&o<10;)console.log(`  Hook[${o}]:`),console.log(`    memoizedState: ${safeStringify(e.memoizedState,2)}`),console.log(`    baseState: ${safeStringify(e.baseState,2)}`),console.log("    queue: "+(e.queue?"[Queue present]":"null")),console.log("    next: "+(e.next?"[Next hook]":"null")),e=e.next,o++;0===o&&console.log("  (memoizedState is not a hooks linked list)")}console.log(""),console.log("DETECTION RESULTS:"),console.log(`  Component Cause: ${r.cause.toUpperCase()}`),r.hookChanges&&r.hookChanges.length>0&&(console.log("  Hook Changes Detected:"),r.hookChanges.forEach(e=>{console.log(`    [${e.index}] ${e.type}: ${e.previousValue} → ${e.currentValue}`),e.description&&console.log(`         ${e.description}`)}));const N="string"==typeof o?.type?o.type:void 0,z=getChangedKeys(n?.memoizedProps,o?.memoizedProps,N);z&&z.length>0?console.log(`  Native Props Changed: [${z.join(", ")}]`):n&&console.log("  Native Props Changed: (none detected)"),console.log(""),console.log("BATCH CONTEXT:"),console.log(`  Batch size: ${a.size}`),console.log(`  All tags in batch: [${Array.from(a).slice(0,20).join(", ")}${a.size>20?"...":""}]`);const $=getParentNativeTag(o),P=null!==$&&a.has($);if(console.log(`  Parent nativeTag: ${$??"not found"}`),console.log("  Parent in batch: "+(P?"YES":"NO")),a.size>1){console.log("  Components in same batch:");let e=o?.return,t=0;for(;e&&t<10;){const o=getNativeTagFromStateNode(e.stateNode);if(null!==o&&a.has(o)){const n=getComponentNameFromFiber(e)||e.type;console.log(`    [depth ${t}] ${n} (tag: ${o})`)}e=e.return,t++}}console.log("\n═══════════════════════════════════════════════════════════════\n")}export function detectRenderCause(e,o,t,n="off"){const r=Date.now();if(!o)return{type:"unknown",timestamp:r};let a=o,s=o.alternate;const i=previousStates.get(e);if(i&&s){const e=i.memoizedProps?.children,t=o.memoizedProps?.children,r=s.memoizedProps?.children,l=o.memoizedProps===i.memoizedProps||void 0!==e&&t===e,c=s.memoizedProps===i.memoizedProps||void 0!==e&&r===e;l&&!c&&(a=s,s=o,"all"===n&&console.log("[RenderCause] Detected fiber swap - using alternate as current"))}let l=null,c=null;s?(l=s.memoizedProps,c=s.memoizedState):i&&(l=i.memoizedProps,c=i.memoizedState);const u=null!==l?{memoizedProps:l,memoizedState:c,timestamp:r}:void 0,m={memoizedProps:a.memoizedProps,memoizedState:a.memoizedState,timestamp:r};updateStoredState(e,m);const p=getOwningComponentFiber(a),f=getComponentNameFromFiber(p)||void 0,g=getParentComponentName(a,f)||void 0,d=detectComponentCause(p),y=d.cause,S=d.hookChanges;if(!u){if("off"!==n)if("minimal"===n)console.log(`[${f||"Unknown"}] MOUNT`);else if("verbose"===n){const o="string"==typeof a?.type?a.type:"Unknown";console.log(`[RENDER] ${f||"Unknown"} (${o}:${e}) | Cause: MOUNT`)}else"all"===n&&logComprehensiveRenderData(e,a,p,u,d,t,previousStates.has(e)?previousStates.size:1);return{type:"mount",timestamp:r,componentCause:"mount",componentName:f}}const h="string"==typeof a.type?a.type:void 0,C=getChangedKeys(u.memoizedProps,m.memoizedProps,h);if("off"!==n&&("minimal"===n?logMinimal(f,d):"verbose"===n?logVerbose(e,a,p,d,C):"all"===n&&logComprehensiveRenderData(e,a,p,u,d,t,previousStates.has(e)?previousStates.size:1)),C&&C.length>0)return{type:"props",changedKeys:C.slice(0,10),timestamp:r,componentCause:y,componentName:f,parentComponentName:g,hookChanges:S||void 0};const b=detectHookChanges(u.memoizedState,m.memoizedState);if(b&&b.length>0)return{type:"hooks",hookIndices:b,timestamp:r,componentCause:y,componentName:f,parentComponentName:g,hookChanges:S||void 0};const k=getParentNativeTag(a);return k&&t.has(k)?{type:"parent",timestamp:r,componentCause:y,componentName:f,parentComponentName:g,hookChanges:S||void 0}:"state"===y?{type:"state",timestamp:r,componentCause:y,componentName:f,parentComponentName:g,hookChanges:S||void 0}:"props"===y?{type:"props",timestamp:r,componentCause:y,componentName:f,parentComponentName:g}:"parent"===y?{type:"parent",timestamp:r,componentCause:y,componentName:f,parentComponentName:g}:{type:"unknown",timestamp:r,componentCause:y,componentName:f,parentComponentName:g}}function getChangedKeys(e,o,t){if(e===o)return null;if(!e||!o)return null;if("object"!=typeof e||"object"!=typeof o)return null;if(Array.isArray(e)||Array.isArray(o))return null;const n=getComponentPropConfig(t),r=new Set([...Object.keys(e),...Object.keys(o)]),a=[];for(const t of r)if(!t.startsWith("__")&&!n.skip.includes(t)){if("children"===t){if(!n.alwaysTrack.includes("children"))continue;const r=e[t],s=o[t];r!==s&&(isPrimitive(r)&&isPrimitive(s)?a.push(`children: ${formatValue(r)} → ${formatValue(s)}`):a.push("children (content)"));continue}if(e[t]!==o[t]){const n=e[t],r=o[t];"style"===t?deepEqual(n,r)?a.push(`${t} (ref only)`):a.push(t):"function"==typeof n&&"function"==typeof r?a.push(`${t} (fn ref)`):a.push(t)}}return a.length>0?a:null}function isPlainObject(e){if(null===e||"object"!=typeof e)return!1;if(Array.isArray(e))return!1;const o=Object.getPrototypeOf(e);return o===Object.prototype||null===o}function deepEqual(e,o,t=0){if(t>5)return!1;if(e===o)return!0;if(typeof e!=typeof o)return!1;if("object"!=typeof e||null===e||null===o)return e===o;if(Array.isArray(e)!==Array.isArray(o))return!1;if(Array.isArray(e)){if(e.length!==o.length)return!1;for(let n=0;n<e.length;n++)if(!deepEqual(e[n],o[n],t+1))return!1;return!0}const n=Object.keys(e),r=Object.keys(o);if(n.length!==r.length)return!1;for(const a of n){if(!r.includes(a))return!1;if(!deepEqual(e[a],o[a],t+1))return!1}return!0}function isPrimitive(e){return null==e||"string"==typeof e||"number"==typeof e||"boolean"==typeof e}function formatValue(e){return null===e?"null":void 0===e?"undefined":"string"==typeof e?e.length>20?`"${e.slice(0,20)}..."`:`"${e}"`:"number"==typeof e||"boolean"==typeof e?String(e):"[object]"}function detectHookChanges(e,o){if(e===o)return null;if(null==e||null==o)return null;if("object"!=typeof e||"object"!=typeof o)return null;const t=[];let n=e,r=o,a=0;for(;null!==r&&a<50;)(null===n||didHookChange(n,r))&&t.push(a),r=r?.next??null,n=n?.next??null,a++;return t.length>0?t:null}function didHookChange(e,o){return e!==o&&(e.memoizedState!==o.memoizedState||void 0!==e.baseState&&e.baseState!==o.baseState)}function getParentNativeTag(e){let o=e?.return,t=0;for(;o&&t<50;){if(o.stateNode){const e=getNativeTagFromStateNode(o.stateNode);if(null!=e)return e}o=o.return,t++}return null}function getParentComponentName(e,o){if(!e)return null;const t=getOwningComponentFiber(e);if(!t)return null;let n=t.return,r=0;for(;n&&r<50;){const e=n.tag;if(0===e||1===e||11===e||15===e){const e=getComponentNameFromFiber(n);if(e&&!isInternalComponentName(e)&&e!==o)return e}n=n.return,r++}return null}function getNativeTagFromStateNode(e){return e?"number"==typeof e.__nativeTag?e.__nativeTag:"number"==typeof e._nativeTag?e._nativeTag:"number"==typeof e.canonical?.__nativeTag?e.canonical.__nativeTag:"number"==typeof e.canonical?.publicInstance?.__nativeTag?e.canonical.publicInstance.__nativeTag:null:null}function updateStoredState(e,o){if(previousStates.size>=500){const e=Array.from(previousStates.entries());e.sort((e,o)=>e[1].timestamp-o[1].timestamp);const o=Math.floor(125);for(let t=0;t<o;t++)previousStates.delete(e[t][0])}previousStates.set(e,o)}export function clearRenderCauseState(){previousStates.clear()}export function removeRenderCauseState(e){previousStates.delete(e)}export function getRenderCauseStats(){return{storedStates:previousStates.size,maxStates:500}}const MAX_CLONE_DEPTH=5,MAX_STRING_LENGTH=200,MAX_ARRAY_ITEMS=20,MAX_OBJECT_KEYS=30;export function safeCloneForHistory(e,o=0,t=new WeakSet){if(null==e)return e;if("boolean"==typeof e||"number"==typeof e)return e;if("string"==typeof e)return e.length>200?e.slice(0,200)+"...":e;if("function"==typeof e)return`[Function: ${e.name||"anonymous"}]`;if("symbol"==typeof e)return`[Symbol: ${e.description||""}]`;if(o>=5)return Array.isArray(e)?`[Array: ${e.length} items]`:"object"==typeof e?`[Object: ${Object.keys(e).length} keys]`:"[...]";if("object"==typeof e){if(t.has(e))return"[Circular]";t.add(e)}if(Array.isArray(e)){const n=e.slice(0,20).map(e=>safeCloneForHistory(e,o+1,t));return e.length>20&&n.push(`[...${e.length-20} more]`),n}if(e instanceof Date)return e.toISOString();if(e instanceof Error)return`[Error: ${e.message}]`;if(e instanceof RegExp)return e.toString();if(e instanceof Map){const n={__type:"Map",__size:e.size};let r=0;for(const[a,s]of e){if(r>=30){n[`...${e.size-r} more`]=!0;break}n["string"==typeof a?a:String(a)]=safeCloneForHistory(s,o+1,t),r++}return n}if(e instanceof Set)return{__type:"Set",__size:e.size,values:Array.from(e).slice(0,20).map(e=>safeCloneForHistory(e,o+1,t))};if("object"==typeof e){const n={},r=Object.keys(e),a=r.slice(0,30);for(const r of a)if(!r.startsWith("__")&&"children"!==r)try{n[r]=safeCloneForHistory(e[r],o+1,t)}catch{n[r]="[Error accessing property]"}return r.length>30&&(n[`...${r.length-30} more keys`]=!0),n}return"[Unknown type]"}export function capturePropsSnapshot(e){if(e?.memoizedProps)return safeCloneForHistory(e.memoizedProps)}export function captureStateSnapshot(e){if(!e?.memoizedState)return;const o=e.memoizedState;if("object"==typeof o&&null!==o&&"next"in o){const e=[];let t=o,n=0;for(;t&&n<50;)e.push({index:n,memoizedState:safeCloneForHistory(t.memoizedState)}),t=t.next,n++;return{__type:"Hooks",hooks:e}}return safeCloneForHistory(o)}