@buoy-gg/highlight-updates 2.1.11 → 2.1.13

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

@@ -1,500 +1 @@
-"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
-}) {
-  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",
-    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, {
-          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, {
-        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, {
-      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, {
-      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.buoyColors.textMuted
-        }],
-        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.buoyColors.textMuted
-          }],
-          children: "\u25CB"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.enhancedChangeText, {
-            color: _sharedUi.buoyColors.textMuted
-          }],
-          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.buoyColors.border
-  },
-  badgeText: {
-    fontSize: 10,
-    fontWeight: "700"
-  },
-  badgeTextCompact: {
-    fontSize: 9
-  },
-  componentBadgeText: {
-    fontWeight: "500",
-    textTransform: "lowercase"
-  },
-  arrowText: {
-    fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted
-  },
-  arrowTextCompact: {
-    fontSize: 9
-  },
-  keysText: {
-    fontSize: 11,
-    color: _sharedUi.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: _sharedUi.buoyColors.textSecondary,
-    minWidth: 70
-  },
-  twoLevelName: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
-    fontFamily: "monospace"
-  },
-  twoLevelText: {
-    fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary
-  },
-  twoLevelKeys: {
-    fontSize: 10,
-    color: _sharedUi.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: _sharedUi.buoyColors.text,
-    fontFamily: "monospace"
-  },
-  enhancedNativeTag: {
-    backgroundColor: _sharedUi.buoyColors.input,
-    paddingVertical: 2,
-    paddingHorizontal: 6,
-    borderRadius: 4
-  },
-  enhancedNativeTagText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.textMuted,
-    fontFamily: "monospace"
-  },
-  enhancedFlowContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.input,
-    borderRadius: 6
-  },
-  enhancedFlowLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary
-  },
-  enhancedFlowBadge: {
-    paddingVertical: 3,
-    paddingHorizontal: 8,
-    borderRadius: 4
-  },
-  enhancedFlowBadgeText: {
-    fontSize: 10,
-    fontWeight: "700"
-  },
-  enhancedFlowArrow: {
-    fontSize: 14,
-    color: _sharedUi.buoyColors.textMuted,
-    fontWeight: "300"
-  },
-  enhancedSection: {
-    gap: 6
-  },
-  enhancedSectionTitle: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
-    letterSpacing: 0.3
-  },
-  enhancedChangeRow: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: 6,
-    paddingLeft: 4
-  },
-  enhancedChangeIcon: {
-    fontSize: 12,
-    color: _sharedUi.buoyColors.warning,
-    fontFamily: "monospace",
-    width: 16
-  },
-  enhancedChangeText: {
-    fontSize: 12,
-    color: _sharedUi.buoyColors.text,
-    fontFamily: "monospace",
-    flex: 1
-  },
-  enhancedNoChanges: {
-    fontSize: 12,
-    color: _sharedUi.buoyColors.textMuted,
-    fontStyle: "italic",
-    paddingLeft: 4
-  }
-});
-var _default = exports.default = RenderCauseBadge;
+"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}){const s=CAUSE_CONFIG[e.type],a=e.componentCause?COMPONENT_CAUSE_CONFIG[e.componentCause]:null,r=o&&a&&e.componentCause!==e.type;return(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__cause-badge",style:[styles.container,t&&styles.containerCompact],children:[r&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.badge,t&&styles.badgeCompact,styles.componentBadge,{backgroundColor:a.color+"15"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,t&&styles.badgeTextCompact,styles.componentBadgeText,{color:a.color}],children:a.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,{style:[styles.badgeText,t&&styles.badgeTextCompact,{color:s.color}],children:s.label})}),n&&e.changedKeys&&e.changedKeys.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.keysText,t&&styles.keysTextCompact],numberOfLines:1,children:e.changedKeys.join(", ")}),n&&e.hookIndices&&e.hookIndices.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{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,s=e.componentName||"Unknown",a=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:s}),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})})]}),a&&(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.buoyColors.textMuted}],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.buoyColors.textMuted}],children:"○"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.enhancedChangeText,{color:_sharedUi.buoyColors.textMuted}],children:e})]},t))]}),!a&&!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.buoyColors.border},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},componentBadgeText:{fontWeight:"500",textTransform:"lowercase"},arrowText:{fontSize:10,color:_sharedUi.buoyColors.textMuted},arrowTextCompact:{fontSize:9},keysText:{fontSize:11,color:_sharedUi.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:_sharedUi.buoyColors.textSecondary,minWidth:70},twoLevelName:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},twoLevelText:{fontSize:11,color:_sharedUi.buoyColors.textSecondary},twoLevelKeys:{fontSize:10,color:_sharedUi.buoyColors.textSecondary,fontFamily:"monospace"},enhancedContainer:{gap:12},enhancedHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},enhancedComponentName:{fontSize:14,fontWeight:"700",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},enhancedNativeTag:{backgroundColor:_sharedUi.buoyColors.input,paddingVertical:2,paddingHorizontal:6,borderRadius:4},enhancedNativeTagText:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},enhancedFlowContainer:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:12,backgroundColor:_sharedUi.buoyColors.input,borderRadius:6},enhancedFlowLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary},enhancedFlowBadge:{paddingVertical:3,paddingHorizontal:8,borderRadius:4},enhancedFlowBadgeText:{fontSize:10,fontWeight:"700"},enhancedFlowArrow:{fontSize:14,color:_sharedUi.buoyColors.textMuted,fontWeight:"300"},enhancedSection:{gap:6},enhancedSectionTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,letterSpacing:.3},enhancedChangeRow:{flexDirection:"row",alignItems:"flex-start",gap:6,paddingLeft:4},enhancedChangeIcon:{fontSize:12,color:_sharedUi.buoyColors.warning,fontFamily:"monospace",width:16},enhancedChangeText:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flex:1},enhancedNoChanges:{fontSize:12,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic",paddingLeft:4}});var _default=exports.default=RenderCauseBadge;