@buoy-gg/highlight-updates 2.1.12 → 2.1.13

package/lib/module/highlight-updates/components/RenderCauseBadge.js

@@ -1,491 +1 @@
-"use strict";
-
-/**
- * RenderCauseBadge
- *
- * Displays a colored badge indicating why a component rendered.
- * Used in RenderListItem and RenderDetailView.
- *
- * TWO-LEVEL CAUSATION:
- * Shows both the native-level cause (what props changed on the native view)
- * and the component-level cause (why the React component re-rendered).
- */
-
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
-
-// Badge configuration for each cause type
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const CAUSE_CONFIG = {
-  mount: {
-    label: "MOUNT",
-    color: buoyColors.success,
-    tip: "First render of this component."
-  },
-  props: {
-    label: "PROPS",
-    color: buoyColors.warning,
-    tip: "Native props changed. Consider React.memo() or useCallback for handlers."
-  },
-  state: {
-    label: "STATE",
-    color: "#a855f7",
-    // purple
-    tip: "Component state changed via setState."
-  },
-  hooks: {
-    label: "HOOKS",
-    color: "#ec4899",
-    // pink
-    tip: "Hook values changed (useState, useReducer, useMemo, etc.)."
-  },
-  context: {
-    label: "CONTEXT",
-    color: "#06b6d4",
-    // cyan
-    tip: "React context value changed."
-  },
-  parent: {
-    label: "PARENT",
-    color: buoyColors.textSecondary,
-    tip: "Parent component re-rendered. Consider wrapping with React.memo()."
-  },
-  unknown: {
-    label: "?",
-    color: buoyColors.textMuted,
-    tip: "Could not determine render cause."
-  }
-};
-
-// Component-level cause configuration
-export const COMPONENT_CAUSE_CONFIG = {
-  mount: {
-    label: "mount",
-    color: buoyColors.success,
-    tip: "First render of this component."
-  },
-  props: {
-    label: "props",
-    color: buoyColors.warning,
-    tip: "Component received different props from parent."
-  },
-  state: {
-    label: "state",
-    color: "#a855f7",
-    // purple
-    tip: "Component's own state changed (useState/useReducer)."
-  },
-  parent: {
-    label: "parent",
-    color: buoyColors.textSecondary,
-    tip: "Parent re-rendered but this component's props/state didn't change. Consider React.memo()."
-  },
-  unknown: {
-    label: "?",
-    color: buoyColors.textMuted,
-    tip: "Could not determine component render cause."
-  }
-};
-export function RenderCauseBadge({
-  cause,
-  compact = false,
-  showKeys = false,
-  showTwoLevel = false
-}) {
-  const config = CAUSE_CONFIG[cause.type];
-  const componentConfig = cause.componentCause ? COMPONENT_CAUSE_CONFIG[cause.componentCause] : null;
-
-  // For two-level display: "Component (parent) → Native (PROPS)"
-  const showComponentCause = showTwoLevel && componentConfig && cause.componentCause !== cause.type;
-  return /*#__PURE__*/_jsxs(View, {
-    nativeID: "__rn_buoy__cause-badge",
-    style: [styles.container, compact && styles.containerCompact],
-    children: [showComponentCause && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.badge, compact && styles.badgeCompact, styles.componentBadge, {
-          backgroundColor: componentConfig.color + "15"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.badgeText, compact && styles.badgeTextCompact, styles.componentBadgeText, {
-            color: componentConfig.color
-          }],
-          children: componentConfig.label
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.arrowText, compact && styles.arrowTextCompact],
-        children: "\u2192"
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: [styles.badge, compact && styles.badgeCompact, {
-        backgroundColor: config.color + "20"
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.badgeText, compact && styles.badgeTextCompact, {
-          color: config.color
-        }],
-        children: config.label
-      })
-    }), showKeys && cause.changedKeys && cause.changedKeys.length > 0 && /*#__PURE__*/_jsx(Text, {
-      style: [styles.keysText, compact && styles.keysTextCompact],
-      numberOfLines: 1,
-      children: cause.changedKeys.join(", ")
-    }), showKeys && cause.hookIndices && cause.hookIndices.length > 0 && /*#__PURE__*/_jsxs(Text, {
-      style: [styles.keysText, compact && styles.keysTextCompact],
-      numberOfLines: 1,
-      children: ["Hook ", cause.hookIndices.join(", ")]
-    })]
-  });
-}
-
-/**
- * TwoLevelCauseBadge - A more detailed badge for detail views
- * Shows: "ComponentName re-rendered due to PARENT → native PROPS [style]"
- */
-export function TwoLevelCauseBadge({
-  cause
-}) {
-  const nativeConfig = CAUSE_CONFIG[cause.type];
-  const componentConfig = cause.componentCause ? COMPONENT_CAUSE_CONFIG[cause.componentCause] : null;
-  const componentName = cause.componentName || "Component";
-  return /*#__PURE__*/_jsxs(View, {
-    nativeID: "__rn_buoy__two-level-cause",
-    style: styles.twoLevelContainer,
-    children: [componentConfig && /*#__PURE__*/_jsxs(View, {
-      style: styles.twoLevelRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.twoLevelLabel,
-        children: "Component:"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.twoLevelName,
-        children: componentName
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.twoLevelText,
-        children: "re-rendered due to"
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          backgroundColor: componentConfig.color + "20"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.badgeText, {
-            color: componentConfig.color
-          }],
-          children: componentConfig.label.toUpperCase()
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.twoLevelRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.twoLevelLabel,
-        children: "Native:"
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          backgroundColor: nativeConfig.color + "20"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.badgeText, {
-            color: nativeConfig.color
-          }],
-          children: nativeConfig.label
-        })
-      }), cause.changedKeys && cause.changedKeys.length > 0 && /*#__PURE__*/_jsxs(Text, {
-        style: styles.twoLevelKeys,
-        children: ["[", cause.changedKeys.join(", "), "]"]
-      })]
-    })]
-  });
-}
-
-/**
- * EnhancedCauseDisplay - Phase 5: Comprehensive cause display
- * Shows detailed breakdown of why a component rendered with clear sections
- */
-export function EnhancedCauseDisplay({
-  cause,
-  nativeType
-}) {
-  const nativeConfig = CAUSE_CONFIG[cause.type];
-  const componentConfig = cause.componentCause ? COMPONENT_CAUSE_CONFIG[cause.componentCause] : null;
-  const componentName = cause.componentName || "Unknown";
-  const hasHookChanges = cause.hookChanges && cause.hookChanges.length > 0;
-  const hasChangedKeys = cause.changedKeys && cause.changedKeys.length > 0;
-
-  // Separate ref-only changes from actual value changes
-  const refOnlyChanges = cause.changedKeys?.filter(k => k.includes("(ref only)") || k.includes("(fn ref)")) || [];
-  const valueChanges = cause.changedKeys?.filter(k => !k.includes("(ref only)") && !k.includes("(fn ref)")) || [];
-  return /*#__PURE__*/_jsxs(View, {
-    nativeID: "__rn_buoy__enhanced-cause",
-    style: styles.enhancedContainer,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.enhancedHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.enhancedComponentName,
-        children: componentName
-      }), nativeType && /*#__PURE__*/_jsx(View, {
-        style: styles.enhancedNativeTag,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.enhancedNativeTagText,
-          children: nativeType
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.enhancedFlowContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.enhancedFlowLabel,
-        children: "Cause:"
-      }), componentConfig && /*#__PURE__*/_jsx(View, {
-        style: [styles.enhancedFlowBadge, {
-          backgroundColor: componentConfig.color + "20"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.enhancedFlowBadgeText, {
-            color: componentConfig.color
-          }],
-          children: componentConfig.label.toUpperCase()
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.enhancedFlowArrow,
-        children: "\u2192"
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.enhancedFlowBadge, {
-          backgroundColor: nativeConfig.color + "20"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.enhancedFlowBadgeText, {
-            color: nativeConfig.color
-          }],
-          children: nativeConfig.label
-        })
-      })]
-    }), hasHookChanges && /*#__PURE__*/_jsxs(View, {
-      style: styles.enhancedSection,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.enhancedSectionTitle,
-        children: "Component State Changed:"
-      }), cause.hookChanges.map(hook => /*#__PURE__*/_jsxs(View, {
-        style: styles.enhancedChangeRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.enhancedChangeIcon,
-          children: "\u26A1"
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.enhancedChangeText,
-          children: ["Hook[", hook.index, "] (", hook.type, "): ", hook.description]
-        })]
-      }, hook.index))]
-    }), valueChanges.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.enhancedSection,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.enhancedSectionTitle,
-        children: "Native Props Changed:"
-      }), valueChanges.map((key, index) => /*#__PURE__*/_jsxs(View, {
-        style: styles.enhancedChangeRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.enhancedChangeIcon,
-          children: "~"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.enhancedChangeText,
-          children: key
-        })]
-      }, index))]
-    }), refOnlyChanges.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.enhancedSection,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.enhancedSectionTitle, {
-          color: buoyColors.textMuted
-        }],
-        children: "Reference Changes (optimization opportunity):"
-      }), refOnlyChanges.map((key, index) => /*#__PURE__*/_jsxs(View, {
-        style: styles.enhancedChangeRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.enhancedChangeIcon, {
-            color: buoyColors.textMuted
-          }],
-          children: "\u25CB"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.enhancedChangeText, {
-            color: buoyColors.textMuted
-          }],
-          children: key
-        })]
-      }, index))]
-    }), !hasHookChanges && !hasChangedKeys && cause.type !== "mount" && /*#__PURE__*/_jsx(View, {
-      style: styles.enhancedSection,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.enhancedNoChanges,
-        children: cause.type === "parent" ? "Parent re-rendered (consider React.memo)" : "No specific changes detected"
-      })
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  containerCompact: {
-    gap: 4
-  },
-  badge: {
-    paddingVertical: 3,
-    paddingHorizontal: 6,
-    borderRadius: 4
-  },
-  badgeCompact: {
-    paddingVertical: 2,
-    paddingHorizontal: 5
-  },
-  componentBadge: {
-    borderStyle: "dashed",
-    borderWidth: 1,
-    borderColor: buoyColors.border
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: "700"
-  },
-  badgeTextCompact: {
-    fontSize: 9
-  },
-  componentBadgeText: {
-    fontWeight: "500",
-    textTransform: "lowercase"
-  },
-  arrowText: {
-    fontSize: 10,
-    color: buoyColors.textMuted
-  },
-  arrowTextCompact: {
-    fontSize: 9
-  },
-  keysText: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace",
-    flex: 1
-  },
-  keysTextCompact: {
-    fontSize: 10
-  },
-  // Two-level badge styles
-  twoLevelContainer: {
-    gap: 8
-  },
-  twoLevelRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    flexWrap: "wrap",
-    gap: 6
-  },
-  twoLevelLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: buoyColors.textSecondary,
-    minWidth: 70
-  },
-  twoLevelName: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: buoyColors.text,
-    fontFamily: "monospace"
-  },
-  twoLevelText: {
-    fontSize: 11,
-    color: buoyColors.textSecondary
-  },
-  twoLevelKeys: {
-    fontSize: 10,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace"
-  },
-  // Enhanced cause display styles (Phase 5)
-  enhancedContainer: {
-    gap: 12
-  },
-  enhancedHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  enhancedComponentName: {
-    fontSize: 14,
-    fontWeight: "700",
-    color: buoyColors.text,
-    fontFamily: "monospace"
-  },
-  enhancedNativeTag: {
-    backgroundColor: buoyColors.input,
-    paddingVertical: 2,
-    paddingHorizontal: 6,
-    borderRadius: 4
-  },
-  enhancedNativeTagText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: buoyColors.textMuted,
-    fontFamily: "monospace"
-  },
-  enhancedFlowContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    backgroundColor: buoyColors.input,
-    borderRadius: 6
-  },
-  enhancedFlowLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: buoyColors.textSecondary
-  },
-  enhancedFlowBadge: {
-    paddingVertical: 3,
-    paddingHorizontal: 8,
-    borderRadius: 4
-  },
-  enhancedFlowBadgeText: {
-    fontSize: 10,
-    fontWeight: "700"
-  },
-  enhancedFlowArrow: {
-    fontSize: 14,
-    color: buoyColors.textMuted,
-    fontWeight: "300"
-  },
-  enhancedSection: {
-    gap: 6
-  },
-  enhancedSectionTitle: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: buoyColors.textSecondary,
-    letterSpacing: 0.3
-  },
-  enhancedChangeRow: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 6,
-    paddingLeft: 4
-  },
-  enhancedChangeIcon: {
-    fontSize: 12,
-    color: buoyColors.warning,
-    fontFamily: "monospace",
-    width: 16
-  },
-  enhancedChangeText: {
-    fontSize: 12,
-    color: buoyColors.text,
-    fontFamily: "monospace",
-    flex: 1
-  },
-  enhancedNoChanges: {
-    fontSize: 12,
-    color: buoyColors.textMuted,
-    fontStyle: "italic",
-    paddingLeft: 4
-  }
-});
-export default RenderCauseBadge;
+"use strict";import React from"react";import{View,Text,StyleSheet}from"react-native";import{buoyColors}from"@buoy-gg/shared-ui";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export const CAUSE_CONFIG={mount:{label:"MOUNT",color:buoyColors.success,tip:"First render of this component."},props:{label:"PROPS",color:buoyColors.warning,tip:"Native props changed. Consider React.memo() or useCallback for handlers."},state:{label:"STATE",color:"#a855f7",tip:"Component state changed via setState."},hooks:{label:"HOOKS",color:"#ec4899",tip:"Hook values changed (useState, useReducer, useMemo, etc.)."},context:{label:"CONTEXT",color:"#06b6d4",tip:"React context value changed."},parent:{label:"PARENT",color:buoyColors.textSecondary,tip:"Parent component re-rendered. Consider wrapping with React.memo()."},unknown:{label:"?",color:buoyColors.textMuted,tip:"Could not determine render cause."}};export const COMPONENT_CAUSE_CONFIG={mount:{label:"mount",color:buoyColors.success,tip:"First render of this component."},props:{label:"props",color:buoyColors.warning,tip:"Component received different props from parent."},state:{label:"state",color:"#a855f7",tip:"Component's own state changed (useState/useReducer)."},parent:{label:"parent",color:buoyColors.textSecondary,tip:"Parent re-rendered but this component's props/state didn't change. Consider React.memo()."},unknown:{label:"?",color:buoyColors.textMuted,tip:"Could not determine component render cause."}};export function RenderCauseBadge({cause:e,compact:t=!1,showKeys:o=!1,showTwoLevel:n=!1}){const s=CAUSE_CONFIG[e.type],l=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,a=n&&l&&e.componentCause!==e.type;return _jsxs(View,{nativeID:"__rn_buoy__cause-badge",style:[styles.container,t&&styles.containerCompact],children:[a&&_jsxs(_Fragment,{children:[_jsx(View,{style:[styles.badge,t&&styles.badgeCompact,styles.componentBadge,{backgroundColor:l.color+"15"}],children:_jsx(Text,{style:[styles.badgeText,t&&styles.badgeTextCompact,styles.componentBadgeText,{color:l.color}],children:l.label})}),_jsx(Text,{style:[styles.arrowText,t&&styles.arrowTextCompact],children:"→"})]}),_jsx(View,{style:[styles.badge,t&&styles.badgeCompact,{backgroundColor:s.color+"20"}],children:_jsx(Text,{style:[styles.badgeText,t&&styles.badgeTextCompact,{color:s.color}],children:s.label})}),o&&e.changedKeys&&e.changedKeys.length>0&&_jsx(Text,{style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:e.changedKeys.join(", ")}),o&&e.hookIndices&&e.hookIndices.length>0&&_jsxs(Text,{style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:["Hook ",e.hookIndices.join(", ")]})]})}export function TwoLevelCauseBadge({cause:e}){const t=CAUSE_CONFIG[e.type],o=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,n=e.componentName||"Component";return _jsxs(View,{nativeID:"__rn_buoy__two-level-cause",style:styles.twoLevelContainer,children:[o&&_jsxs(View,{style:styles.twoLevelRow,children:[_jsx(Text,{style:styles.twoLevelLabel,children:"Component:"}),_jsx(Text,{style:styles.twoLevelName,children:n}),_jsx(Text,{style:styles.twoLevelText,children:"re-rendered due to"}),_jsx(View,{style:[styles.badge,{backgroundColor:o.color+"20"}],children:_jsx(Text,{style:[styles.badgeText,{color:o.color}],children:o.label.toUpperCase()})})]}),_jsxs(View,{style:styles.twoLevelRow,children:[_jsx(Text,{style:styles.twoLevelLabel,children:"Native:"}),_jsx(View,{style:[styles.badge,{backgroundColor:t.color+"20"}],children:_jsx(Text,{style:[styles.badgeText,{color:t.color}],children:t.label})}),e.changedKeys&&e.changedKeys.length>0&&_jsxs(Text,{style:styles.twoLevelKeys,children:["[",e.changedKeys.join(", "),"]"]})]})]})}export function EnhancedCauseDisplay({cause:e,nativeType:t}){const o=CAUSE_CONFIG[e.type],n=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,s=e.componentName||"Unknown",l=e.hookChanges&&e.hookChanges.length>0,a=e.changedKeys&&e.changedKeys.length>0,r=e.changedKeys?.filter(e=>e.includes("(ref only)")||e.includes("(fn ref)"))||[],c=e.changedKeys?.filter(e=>!e.includes("(ref only)")&&!e.includes("(fn ref)"))||[];return _jsxs(View,{nativeID:"__rn_buoy__enhanced-cause",style:styles.enhancedContainer,children:[_jsxs(View,{style:styles.enhancedHeader,children:[_jsx(Text,{style:styles.enhancedComponentName,children:s}),t&&_jsx(View,{style:styles.enhancedNativeTag,children:_jsx(Text,{style:styles.enhancedNativeTagText,children:t})})]}),_jsxs(View,{style:styles.enhancedFlowContainer,children:[_jsx(Text,{style:styles.enhancedFlowLabel,children:"Cause:"}),n&&_jsx(View,{style:[styles.enhancedFlowBadge,{backgroundColor:n.color+"20"}],children:_jsx(Text,{style:[styles.enhancedFlowBadgeText,{color:n.color}],children:n.label.toUpperCase()})}),_jsx(Text,{style:styles.enhancedFlowArrow,children:"→"}),_jsx(View,{style:[styles.enhancedFlowBadge,{backgroundColor:o.color+"20"}],children:_jsx(Text,{style:[styles.enhancedFlowBadgeText,{color:o.color}],children:o.label})})]}),l&&_jsxs(View,{style:styles.enhancedSection,children:[_jsx(Text,{style:styles.enhancedSectionTitle,children:"Component State Changed:"}),e.hookChanges.map(e=>_jsxs(View,{style:styles.enhancedChangeRow,children:[_jsx(Text,{style:styles.enhancedChangeIcon,children:"⚡"}),_jsxs(Text,{style:styles.enhancedChangeText,children:["Hook[",e.index,"] (",e.type,"): ",e.description]})]},e.index))]}),c.length>0&&_jsxs(View,{style:styles.enhancedSection,children:[_jsx(Text,{style:styles.enhancedSectionTitle,children:"Native Props Changed:"}),c.map((e,t)=>_jsxs(View,{style:styles.enhancedChangeRow,children:[_jsx(Text,{style:styles.enhancedChangeIcon,children:"~"}),_jsx(Text,{style:styles.enhancedChangeText,children:e})]},t))]}),r.length>0&&_jsxs(View,{style:styles.enhancedSection,children:[_jsx(Text,{style:[styles.enhancedSectionTitle,{color:buoyColors.textMuted}],children:"Reference Changes (optimization opportunity):"}),r.map((e,t)=>_jsxs(View,{style:styles.enhancedChangeRow,children:[_jsx(Text,{style:[styles.enhancedChangeIcon,{color:buoyColors.textMuted}],children:"○"}),_jsx(Text,{style:[styles.enhancedChangeText,{color:buoyColors.textMuted}],children:e})]},t))]}),!l&&!a&&"mount"!==e.type&&_jsx(View,{style:styles.enhancedSection,children:_jsx(Text,{style:styles.enhancedNoChanges,children:"parent"===e.type?"Parent re-rendered (consider React.memo)":"No specific changes detected"})})]})}const styles=StyleSheet.create({container:{flexDirection:"row",alignItems:"center",gap:6},containerCompact:{gap:4},badge:{paddingVertical:3,paddingHorizontal:6,borderRadius:4},badgeCompact:{paddingVertical:2,paddingHorizontal:5},componentBadge:{borderStyle:"dashed",borderWidth:1,borderColor:buoyColors.border},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},componentBadgeText:{fontWeight:"500",textTransform:"lowercase"},arrowText:{fontSize:10,color:buoyColors.textMuted},arrowTextCompact:{fontSize:9},keysText:{fontSize:11,color:buoyColors.textSecondary,fontFamily:"monospace",flex:1},keysTextCompact:{fontSize:10},twoLevelContainer:{gap:8},twoLevelRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6},twoLevelLabel:{fontSize:11,fontWeight:"600",color:buoyColors.textSecondary,minWidth:70},twoLevelName:{fontSize:11,fontWeight:"600",color:buoyColors.text,fontFamily:"monospace"},twoLevelText:{fontSize:11,color:buoyColors.textSecondary},twoLevelKeys:{fontSize:10,color:buoyColors.textSecondary,fontFamily:"monospace"},enhancedContainer:{gap:12},enhancedHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},enhancedComponentName:{fontSize:14,fontWeight:"700",color:buoyColors.text,fontFamily:"monospace"},enhancedNativeTag:{backgroundColor:buoyColors.input,paddingVertical:2,paddingHorizontal:6,borderRadius:4},enhancedNativeTagText:{fontSize:10,fontWeight:"600",color:buoyColors.textMuted,fontFamily:"monospace"},enhancedFlowContainer:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:12,backgroundColor:buoyColors.input,borderRadius:6},enhancedFlowLabel:{fontSize:11,fontWeight:"600",color:buoyColors.textSecondary},enhancedFlowBadge:{paddingVertical:3,paddingHorizontal:8,borderRadius:4},enhancedFlowBadgeText:{fontSize:10,fontWeight:"700"},enhancedFlowArrow:{fontSize:14,color:buoyColors.textMuted,fontWeight:"300"},enhancedSection:{gap:6},enhancedSectionTitle:{fontSize:11,fontWeight:"600",color:buoyColors.textSecondary,letterSpacing:.3},enhancedChangeRow:{flexDirection:"row",alignItems:"flex-start",gap:6,paddingLeft:4},enhancedChangeIcon:{fontSize:12,color:buoyColors.warning,fontFamily:"monospace",width:16},enhancedChangeText:{fontSize:12,color:buoyColors.text,fontFamily:"monospace",flex:1},enhancedNoChanges:{fontSize:12,color:buoyColors.textMuted,fontStyle:"italic",paddingLeft:4}});export default RenderCauseBadge;