@buoy-gg/highlight-updates 7.0.38 → 7.0.40

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

@@ -1 +1,499 @@
-"use strict";import React from"react";import{View,Text,StyleSheet}from"react-native";import{buoyColors,night,monoFont}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,testID:s}){const l=CAUSE_CONFIG[e.type],a=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,r=n&&a&&e.componentCause!==e.type;return _jsxs(View,{nativeID:"__rn_buoy__cause-badge",testID:s,style:[styles.container,t&&styles.containerCompact],children:[r&&_jsxs(_Fragment,{children:[_jsx(View,{style:[styles.badge,t&&styles.badgeCompact,styles.componentBadge,{backgroundColor:a.color+"15"}],children:_jsx(Text,{testID:s?`${s}-component`:void 0,style:[styles.badgeText,t&&styles.badgeTextCompact,styles.componentBadgeText,{color:a.color}],children:a.label})}),_jsx(Text,{style:[styles.arrowText,t&&styles.arrowTextCompact],children:"→"})]}),_jsx(View,{style:[styles.badge,t&&styles.badgeCompact,{backgroundColor:l.color+"20"}],children:_jsx(Text,{testID:s?`${s}-native`:void 0,style:[styles.badgeText,t&&styles.badgeTextCompact,{color:l.color}],children:l.label})}),o&&e.changedKeys&&e.changedKeys.length>0&&_jsx(Text,{testID:s?`${s}-keys`:void 0,style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:e.changedKeys.join(", ")}),o&&e.hookIndices&&e.hookIndices.length>0&&_jsxs(Text,{testID:s?`${s}-hooks`:void 0,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:night.color.textTertiary}],children:"Reference Changes (optimization opportunity):"}),r.map((e,t)=>_jsxs(View,{style:styles.enhancedChangeRow,children:[_jsx(Text,{style:[styles.enhancedChangeIcon,{color:night.color.textTertiary}],children:"○"}),_jsx(Text,{style:[styles.enhancedChangeText,{color:night.color.textTertiary}],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:night.color.border},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},componentBadgeText:{fontWeight:"500",textTransform:"lowercase"},arrowText:{fontSize:10,color:night.color.textTertiary},arrowTextCompact:{fontSize:9},keysText:{fontSize:11,color:night.color.textSecondary,fontFamily:monoFont,flex:1},keysTextCompact:{fontSize:10},twoLevelContainer:{gap:8},twoLevelRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6},twoLevelLabel:{fontSize:11,fontWeight:"600",color:night.color.textSecondary,minWidth:70},twoLevelName:{fontSize:11,fontWeight:"600",color:night.color.text,fontFamily:monoFont},twoLevelText:{fontSize:11,color:night.color.textSecondary},twoLevelKeys:{fontSize:10,color:night.color.textSecondary,fontFamily:monoFont},enhancedContainer:{gap:12},enhancedHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},enhancedComponentName:{fontSize:14,fontWeight:"700",color:night.color.text,fontFamily:monoFont},enhancedNativeTag:{backgroundColor:night.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},enhancedNativeTagText:{fontSize:10,fontWeight:"600",color:night.color.textTertiary,fontFamily:monoFont},enhancedFlowContainer:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:12,backgroundColor:night.color.bg,borderRadius:6},enhancedFlowLabel:{fontSize:11,fontWeight:"600",color:night.color.textSecondary},enhancedFlowBadge:{paddingVertical:3,paddingHorizontal:8,borderRadius:4},enhancedFlowBadgeText:{fontSize:10,fontWeight:"700"},enhancedFlowArrow:{fontSize:14,color:night.color.textTertiary,fontWeight:"300"},enhancedSection:{gap:6},enhancedSectionTitle:{fontSize:11,fontWeight:"600",color:night.color.textSecondary,letterSpacing:.3},enhancedChangeRow:{flexDirection:"row",alignItems:"flex-start",gap:6,paddingLeft:4},enhancedChangeIcon:{fontSize:12,color:night.color.warning,fontFamily:monoFont,width:16},enhancedChangeText:{fontSize:12,color:night.color.text,fontFamily:monoFont,flex:1},enhancedNoChanges:{fontSize:12,color:night.color.textTertiary,fontStyle:"italic",paddingLeft:4}});export default RenderCauseBadge;
+"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, night, monoFont } 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,
+  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__*/_jsxs(View, {
+    nativeID: "__rn_buoy__cause-badge",
+    testID: testID,
+    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, {
+          testID: testID ? `${testID}-component` : undefined,
+          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, {
+        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__*/_jsx(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__*/_jsxs(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]"
+ */
+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: night.color.textTertiary
+        }],
+        children: "Reference Changes (optimization opportunity):"
+      }), refOnlyChanges.map((key, index) => /*#__PURE__*/_jsxs(View, {
+        style: styles.enhancedChangeRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.enhancedChangeIcon, {
+            color: night.color.textTertiary
+          }],
+          children: "\u25CB"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.enhancedChangeText, {
+            color: night.color.textTertiary
+          }],
+          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: night.color.border
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  badgeTextCompact: {
+    fontSize: 9
+  },
+  componentBadgeText: {
+    fontWeight: "500",
+    textTransform: "lowercase"
+  },
+  arrowText: {
+    fontSize: 10,
+    color: night.color.textTertiary
+  },
+  arrowTextCompact: {
+    fontSize: 9
+  },
+  keysText: {
+    fontSize: 11,
+    color: night.color.textSecondary,
+    fontFamily: 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: night.color.textSecondary,
+    minWidth: 70
+  },
+  twoLevelName: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: night.color.text,
+    fontFamily: monoFont
+  },
+  twoLevelText: {
+    fontSize: 11,
+    color: night.color.textSecondary
+  },
+  twoLevelKeys: {
+    fontSize: 10,
+    color: night.color.textSecondary,
+    fontFamily: 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: night.color.text,
+    fontFamily: monoFont
+  },
+  enhancedNativeTag: {
+    // Inset display chip — the night track color.
+    backgroundColor: night.color.bg,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    borderRadius: 4
+  },
+  enhancedNativeTagText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: night.color.textTertiary,
+    fontFamily: monoFont
+  },
+  enhancedFlowContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    // Inset display box — the night track color.
+    backgroundColor: night.color.bg,
+    borderRadius: 6
+  },
+  enhancedFlowLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: night.color.textSecondary
+  },
+  enhancedFlowBadge: {
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 4
+  },
+  enhancedFlowBadgeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  enhancedFlowArrow: {
+    fontSize: 14,
+    color: night.color.textTertiary,
+    fontWeight: "300"
+  },
+  enhancedSection: {
+    gap: 6
+  },
+  enhancedSectionTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: night.color.textSecondary,
+    letterSpacing: 0.3
+  },
+  enhancedChangeRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 6,
+    paddingLeft: 4
+  },
+  enhancedChangeIcon: {
+    fontSize: 12,
+    color: night.color.warning,
+    fontFamily: monoFont,
+    width: 16
+  },
+  enhancedChangeText: {
+    fontSize: 12,
+    color: night.color.text,
+    fontFamily: monoFont,
+    flex: 1
+  },
+  enhancedNoChanges: {
+    fontSize: 12,
+    color: night.color.textTertiary,
+    fontStyle: "italic",
+    paddingLeft: 4
+  }
+});
+export default RenderCauseBadge;