@buoy-gg/highlight-updates 7.0.38 → 7.0.40

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

@@ -1 +1,508 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.COMPONENT_CAUSE_CONFIG=exports.CAUSE_CONFIG=void 0,exports.EnhancedCauseDisplay=EnhancedCauseDisplay,exports.RenderCauseBadge=RenderCauseBadge,exports.TwoLevelCauseBadge=TwoLevelCauseBadge,exports.default=void 0;var _react=_interopRequireDefault(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const CAUSE_CONFIG=exports.CAUSE_CONFIG={mount:{label:"MOUNT",color:_sharedUi.buoyColors.success,tip:"First render of this component."},props:{label:"PROPS",color:_sharedUi.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:_sharedUi.buoyColors.textSecondary,tip:"Parent component re-rendered. Consider wrapping with React.memo()."},unknown:{label:"?",color:_sharedUi.buoyColors.textMuted,tip:"Could not determine render cause."}},COMPONENT_CAUSE_CONFIG=exports.COMPONENT_CAUSE_CONFIG={mount:{label:"mount",color:_sharedUi.buoyColors.success,tip:"First render of this component."},props:{label:"props",color:_sharedUi.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:_sharedUi.buoyColors.textSecondary,tip:"Parent re-rendered but this component's props/state didn't change. Consider React.memo()."},unknown:{label:"?",color:_sharedUi.buoyColors.textMuted,tip:"Could not determine component render cause."}};function RenderCauseBadge({cause:e,compact:t=!1,showKeys:n=!1,showTwoLevel:o=!1,testID:a}){const s=CAUSE_CONFIG[e.type],r=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,i=o&&r&&e.componentCause!==e.type;return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__cause-badge",testID:a,style:[styles.container,t&&styles.containerCompact],children:[i&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,t&&styles.badgeCompact,styles.componentBadge,{backgroundColor:r.color+"15"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:a?`${a}-component`:void 0,style:[styles.badgeText,t&&styles.badgeTextCompact,styles.componentBadgeText,{color:r.color}],children:r.label})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.arrowText,t&&styles.arrowTextCompact],children:"→"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,t&&styles.badgeCompact,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:a?`${a}-native`:void 0,style:[styles.badgeText,t&&styles.badgeTextCompact,{color:s.color}],children:s.label})}),n&&e.changedKeys&&e.changedKeys.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:a?`${a}-keys`:void 0,style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:e.changedKeys.join(", ")}),n&&e.hookIndices&&e.hookIndices.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{testID:a?`${a}-hooks`:void 0,style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:["Hook ",e.hookIndices.join(", ")]})]})}function TwoLevelCauseBadge({cause:e}){const t=CAUSE_CONFIG[e.type],n=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,o=e.componentName||"Component";return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__two-level-cause",style:styles.twoLevelContainer,children:[n&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.twoLevelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelLabel,children:"Component:"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelName,children:o}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelText,children:"re-rendered due to"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:n.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:n.color}],children:n.label.toUpperCase()})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.twoLevelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.twoLevelLabel,children:"Native:"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,{backgroundColor:t.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:t.color}],children:t.label})}),e.changedKeys&&e.changedKeys.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.twoLevelKeys,children:["[",e.changedKeys.join(", "),"]"]})]})]})}function EnhancedCauseDisplay({cause:e,nativeType:t}){const n=CAUSE_CONFIG[e.type],o=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,a=e.componentName||"Unknown",s=e.hookChanges&&e.hookChanges.length>0,r=e.changedKeys&&e.changedKeys.length>0,i=e.changedKeys?.filter(e=>e.includes("(ref only)")||e.includes("(fn ref)"))||[],l=e.changedKeys?.filter(e=>!e.includes("(ref only)")&&!e.includes("(fn ref)"))||[];return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__enhanced-cause",style:styles.enhancedContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedComponentName,children:a}),t&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.enhancedNativeTag,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedNativeTagText,children:t})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedFlowContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedFlowLabel,children:"Cause:"}),o&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.enhancedFlowBadge,{backgroundColor:o.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedFlowBadgeText,{color:o.color}],children:o.label.toUpperCase()})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedFlowArrow,children:"→"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.enhancedFlowBadge,{backgroundColor:n.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedFlowBadgeText,{color:n.color}],children:n.label})})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedSectionTitle,children:"Component State Changed:"}),e.hookChanges.map(e=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedChangeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedChangeIcon,children:"⚡"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.enhancedChangeText,children:["Hook[",e.index,"] (",e.type,"): ",e.description]})]},e.index))]}),l.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedSectionTitle,children:"Native Props Changed:"}),l.map((e,t)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedChangeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedChangeIcon,children:"~"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedChangeText,children:e})]},t))]}),i.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedSectionTitle,{color:_sharedUi.night.color.textTertiary}],children:"Reference Changes (optimization opportunity):"}),i.map((e,t)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.enhancedChangeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedChangeIcon,{color:_sharedUi.night.color.textTertiary}],children:"○"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedChangeText,{color:_sharedUi.night.color.textTertiary}],children:e})]},t))]}),!s&&!r&&"mount"!==e.type&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.enhancedSection,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.enhancedNoChanges,children:"parent"===e.type?"Parent re-rendered (consider React.memo)":"No specific changes detected"})})]})}const styles=_reactNative.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:_sharedUi.night.color.border},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},componentBadgeText:{fontWeight:"500",textTransform:"lowercase"},arrowText:{fontSize:10,color:_sharedUi.night.color.textTertiary},arrowTextCompact:{fontSize:9},keysText:{fontSize:11,color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont,flex:1},keysTextCompact:{fontSize:10},twoLevelContainer:{gap:8},twoLevelRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6},twoLevelLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,minWidth:70},twoLevelName:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},twoLevelText:{fontSize:11,color:_sharedUi.night.color.textSecondary},twoLevelKeys:{fontSize:10,color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont},enhancedContainer:{gap:12},enhancedHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},enhancedComponentName:{fontSize:14,fontWeight:"700",color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont},enhancedNativeTag:{backgroundColor:_sharedUi.night.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},enhancedNativeTagText:{fontSize:10,fontWeight:"600",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},enhancedFlowContainer:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:12,backgroundColor:_sharedUi.night.color.bg,borderRadius:6},enhancedFlowLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary},enhancedFlowBadge:{paddingVertical:3,paddingHorizontal:8,borderRadius:4},enhancedFlowBadgeText:{fontSize:10,fontWeight:"700"},enhancedFlowArrow:{fontSize:14,color:_sharedUi.night.color.textTertiary,fontWeight:"300"},enhancedSection:{gap:6},enhancedSectionTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textSecondary,letterSpacing:.3},enhancedChangeRow:{flexDirection:"row",alignItems:"flex-start",gap:6,paddingLeft:4},enhancedChangeIcon:{fontSize:12,color:_sharedUi.night.color.warning,fontFamily:_sharedUi.monoFont,width:16},enhancedChangeText:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,flex:1},enhancedNoChanges:{fontSize:12,color:_sharedUi.night.color.textTertiary,fontStyle:"italic",paddingLeft:4}});var _default=exports.default=RenderCauseBadge;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMPONENT_CAUSE_CONFIG = exports.CAUSE_CONFIG = void 0;
+exports.EnhancedCauseDisplay = EnhancedCauseDisplay;
+exports.RenderCauseBadge = RenderCauseBadge;
+exports.TwoLevelCauseBadge = TwoLevelCauseBadge;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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).
+ */
+
+// Badge configuration for each cause type
+
+const CAUSE_CONFIG = exports.CAUSE_CONFIG = {
+  mount: {
+    label: "MOUNT",
+    color: _sharedUi.buoyColors.success,
+    tip: "First render of this component."
+  },
+  props: {
+    label: "PROPS",
+    color: _sharedUi.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: _sharedUi.buoyColors.textSecondary,
+    tip: "Parent component re-rendered. Consider wrapping with React.memo()."
+  },
+  unknown: {
+    label: "?",
+    color: _sharedUi.buoyColors.textMuted,
+    tip: "Could not determine render cause."
+  }
+};
+
+// Component-level cause configuration
+const COMPONENT_CAUSE_CONFIG = exports.COMPONENT_CAUSE_CONFIG = {
+  mount: {
+    label: "mount",
+    color: _sharedUi.buoyColors.success,
+    tip: "First render of this component."
+  },
+  props: {
+    label: "props",
+    color: _sharedUi.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: _sharedUi.buoyColors.textSecondary,
+    tip: "Parent re-rendered but this component's props/state didn't change. Consider React.memo()."
+  },
+  unknown: {
+    label: "?",
+    color: _sharedUi.buoyColors.textMuted,
+    tip: "Could not determine component render cause."
+  }
+};
+function RenderCauseBadge({
+  cause,
+  compact = false,
+  showKeys = false,
+  showTwoLevel = false,
+  testID
+}) {
+  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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    nativeID: "__rn_buoy__cause-badge",
+    testID: testID,
+    style: [styles.container, compact && styles.containerCompact],
+    children: [showComponentCause && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.badge, compact && styles.badgeCompact, styles.componentBadge, {
+          backgroundColor: componentConfig.color + "15"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          testID: testID ? `${testID}-component` : undefined,
+          style: [styles.badgeText, compact && styles.badgeTextCompact, styles.componentBadgeText, {
+            color: componentConfig.color
+          }],
+          children: componentConfig.label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.arrowText, compact && styles.arrowTextCompact],
+        children: "\u2192"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.badge, compact && styles.badgeCompact, {
+        backgroundColor: config.color + "20"
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: testID ? `${testID}-native` : undefined,
+        style: [styles.badgeText, compact && styles.badgeTextCompact, {
+          color: config.color
+        }],
+        children: config.label
+      })
+    }), showKeys && cause.changedKeys && cause.changedKeys.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID ? `${testID}-keys` : undefined,
+      style: [styles.keysText, compact && styles.keysTextCompact],
+      numberOfLines: 1,
+      children: cause.changedKeys.join(", ")
+    }), showKeys && cause.hookIndices && cause.hookIndices.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      testID: testID ? `${testID}-hooks` : undefined,
+      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]"
+ */
+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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    nativeID: "__rn_buoy__two-level-cause",
+    style: styles.twoLevelContainer,
+    children: [componentConfig && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.twoLevelRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.twoLevelLabel,
+        children: "Component:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.twoLevelName,
+        children: componentName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.twoLevelText,
+        children: "re-rendered due to"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.badge, {
+          backgroundColor: componentConfig.color + "20"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.badgeText, {
+            color: componentConfig.color
+          }],
+          children: componentConfig.label.toUpperCase()
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.twoLevelRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.twoLevelLabel,
+        children: "Native:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.badge, {
+          backgroundColor: nativeConfig.color + "20"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.badgeText, {
+            color: nativeConfig.color
+          }],
+          children: nativeConfig.label
+        })
+      }), cause.changedKeys && cause.changedKeys.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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
+ */
+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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    nativeID: "__rn_buoy__enhanced-cause",
+    style: styles.enhancedContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.enhancedHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.enhancedComponentName,
+        children: componentName
+      }), nativeType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.enhancedNativeTag,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.enhancedNativeTagText,
+          children: nativeType
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.enhancedFlowContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.enhancedFlowLabel,
+        children: "Cause:"
+      }), componentConfig && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.enhancedFlowBadge, {
+          backgroundColor: componentConfig.color + "20"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.enhancedFlowBadgeText, {
+            color: componentConfig.color
+          }],
+          children: componentConfig.label.toUpperCase()
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.enhancedFlowArrow,
+        children: "\u2192"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.enhancedFlowBadge, {
+          backgroundColor: nativeConfig.color + "20"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.enhancedFlowBadgeText, {
+            color: nativeConfig.color
+          }],
+          children: nativeConfig.label
+        })
+      })]
+    }), hasHookChanges && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.enhancedSection,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.enhancedSectionTitle,
+        children: "Component State Changed:"
+      }), cause.hookChanges.map(hook => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.enhancedChangeRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.enhancedChangeIcon,
+          children: "\u26A1"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.enhancedChangeText,
+          children: ["Hook[", hook.index, "] (", hook.type, "): ", hook.description]
+        })]
+      }, hook.index))]
+    }), valueChanges.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.enhancedSection,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.enhancedSectionTitle,
+        children: "Native Props Changed:"
+      }), valueChanges.map((key, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.enhancedChangeRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.enhancedChangeIcon,
+          children: "~"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.enhancedChangeText,
+          children: key
+        })]
+      }, index))]
+    }), refOnlyChanges.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.enhancedSection,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.enhancedSectionTitle, {
+          color: _sharedUi.night.color.textTertiary
+        }],
+        children: "Reference Changes (optimization opportunity):"
+      }), refOnlyChanges.map((key, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.enhancedChangeRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.enhancedChangeIcon, {
+            color: _sharedUi.night.color.textTertiary
+          }],
+          children: "\u25CB"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.enhancedChangeText, {
+            color: _sharedUi.night.color.textTertiary
+          }],
+          children: key
+        })]
+      }, index))]
+    }), !hasHookChanges && !hasChangedKeys && cause.type !== "mount" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.enhancedSection,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.enhancedNoChanges,
+        children: cause.type === "parent" ? "Parent re-rendered (consider React.memo)" : "No specific changes detected"
+      })
+    })]
+  });
+}
+const styles = _reactNative.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: _sharedUi.night.color.border
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  badgeTextCompact: {
+    fontSize: 9
+  },
+  componentBadgeText: {
+    fontWeight: "500",
+    textTransform: "lowercase"
+  },
+  arrowText: {
+    fontSize: 10,
+    color: _sharedUi.night.color.textTertiary
+  },
+  arrowTextCompact: {
+    fontSize: 9
+  },
+  keysText: {
+    fontSize: 11,
+    color: _sharedUi.night.color.textSecondary,
+    fontFamily: _sharedUi.monoFont,
+    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: _sharedUi.night.color.textSecondary,
+    minWidth: 70
+  },
+  twoLevelName: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.night.color.text,
+    fontFamily: _sharedUi.monoFont
+  },
+  twoLevelText: {
+    fontSize: 11,
+    color: _sharedUi.night.color.textSecondary
+  },
+  twoLevelKeys: {
+    fontSize: 10,
+    color: _sharedUi.night.color.textSecondary,
+    fontFamily: _sharedUi.monoFont
+  },
+  // 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: _sharedUi.night.color.text,
+    fontFamily: _sharedUi.monoFont
+  },
+  enhancedNativeTag: {
+    // Inset display chip — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    borderRadius: 4
+  },
+  enhancedNativeTagText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.night.color.textTertiary,
+    fontFamily: _sharedUi.monoFont
+  },
+  enhancedFlowContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    // Inset display box — the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
+    borderRadius: 6
+  },
+  enhancedFlowLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.night.color.textSecondary
+  },
+  enhancedFlowBadge: {
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 4
+  },
+  enhancedFlowBadgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  enhancedFlowArrow: {
+    fontSize: 14,
+    color: _sharedUi.night.color.textTertiary,
+    fontWeight: "300"
+  },
+  enhancedSection: {
+    gap: 6
+  },
+  enhancedSectionTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.night.color.textSecondary,
+    letterSpacing: 0.3
+  },
+  enhancedChangeRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 6,
+    paddingLeft: 4
+  },
+  enhancedChangeIcon: {
+    fontSize: 12,
+    color: _sharedUi.night.color.warning,
+    fontFamily: _sharedUi.monoFont,
+    width: 16
+  },
+  enhancedChangeText: {
+    fontSize: 12,
+    color: _sharedUi.night.color.text,
+    fontFamily: _sharedUi.monoFont,
+    flex: 1
+  },
+  enhancedNoChanges: {
+    fontSize: 12,
+    color: _sharedUi.night.color.textTertiary,
+    fontStyle: "italic",
+    paddingLeft: 4
+  }
+});
+var _default = exports.default = RenderCauseBadge;