@buoy-gg/highlight-updates 7.0.41 → 7.0.42

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

@@ -1,499 +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, 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;
+"use strict";import T from"react";import{View as r,Text as t,StyleSheet as b}from"react-native";import{buoyColors as g,night as l,monoFont as p}from"@buoy-gg/shared-ui";import{jsx as o,Fragment as w,jsxs as a}from"react/jsx-runtime";export const CAUSE_CONFIG={mount:{label:"MOUNT",color:g.success,tip:"First render of this component."},props:{label:"PROPS",color:g.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:g.textSecondary,tip:"Parent component re-rendered. Consider wrapping with React.memo()."},unknown:{label:"?",color:g.textMuted,tip:"Could not determine render cause."}};export const COMPONENT_CAUSE_CONFIG={mount:{label:"mount",color:g.success,tip:"First render of this component."},props:{label:"props",color:g.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:g.textSecondary,tip:"Parent re-rendered but this component's props/state didn't change. Consider React.memo()."},unknown:{label:"?",color:g.textMuted,tip:"Could not determine component render cause."}};export function RenderCauseBadge({cause:n,compact:c=false,showKeys:i=false,showTwoLevel:s=false,testID:h}){const y=CAUSE_CONFIG[n.type];const C=n.componentCause?COMPONENT_CAUSE_CONFIG[n.componentCause]:null;const m=s&&C&&n.componentCause!==n.type;return a(r,{nativeID:"__rn_buoy__cause-badge",testID:h,style:[e.container,c&&e.containerCompact],children:[m&&a(w,{children:[o(r,{style:[e.badge,c&&e.badgeCompact,e.componentBadge,{backgroundColor:C.color+"15"}],children:o(t,{testID:h?`${h}-component`:void 0,style:[e.badgeText,c&&e.badgeTextCompact,e.componentBadgeText,{color:C.color}],children:C.label})}),o(t,{style:[e.arrowText,c&&e.arrowTextCompact],children:"\u2192"})]}),o(r,{style:[e.badge,c&&e.badgeCompact,{backgroundColor:y.color+"20"}],children:o(t,{testID:h?`${h}-native`:void 0,style:[e.badgeText,c&&e.badgeTextCompact,{color:y.color}],children:y.label})}),i&&n.changedKeys&&n.changedKeys.length>0&&o(t,{testID:h?`${h}-keys`:void 0,style:[e.keysText,c&&e.keysTextCompact],numberOfLines:1,children:n.changedKeys.join(", ")}),i&&n.hookIndices&&n.hookIndices.length>0&&a(t,{testID:h?`${h}-hooks`:void 0,style:[e.keysText,c&&e.keysTextCompact],numberOfLines:1,children:["Hook ",n.hookIndices.join(", ")]})]})}export function TwoLevelCauseBadge({cause:n}){const c=CAUSE_CONFIG[n.type];const i=n.componentCause?COMPONENT_CAUSE_CONFIG[n.componentCause]:null;const s=n.componentName||"Component";return a(r,{nativeID:"__rn_buoy__two-level-cause",style:e.twoLevelContainer,children:[i&&a(r,{style:e.twoLevelRow,children:[o(t,{style:e.twoLevelLabel,children:"Component:"}),o(t,{style:e.twoLevelName,children:s}),o(t,{style:e.twoLevelText,children:"re-rendered due to"}),o(r,{style:[e.badge,{backgroundColor:i.color+"20"}],children:o(t,{style:[e.badgeText,{color:i.color}],children:i.label.toUpperCase()})})]}),a(r,{style:e.twoLevelRow,children:[o(t,{style:e.twoLevelLabel,children:"Native:"}),o(r,{style:[e.badge,{backgroundColor:c.color+"20"}],children:o(t,{style:[e.badgeText,{color:c.color}],children:c.label})}),n.changedKeys&&n.changedKeys.length>0&&a(t,{style:e.twoLevelKeys,children:["[",n.changedKeys.join(", "),"]"]})]})]})}export function EnhancedCauseDisplay({cause:n,nativeType:c}){const i=CAUSE_CONFIG[n.type];const s=n.componentCause?COMPONENT_CAUSE_CONFIG[n.componentCause]:null;const h=n.componentName||"Unknown";const y=n.hookChanges&&n.hookChanges.length>0;const C=n.changedKeys&&n.changedKeys.length>0;const m=n.changedKeys?.filter(d=>d.includes("(ref only)")||d.includes("(fn ref)"))||[];const x=n.changedKeys?.filter(d=>!d.includes("(ref only)")&&!d.includes("(fn ref)"))||[];return a(r,{nativeID:"__rn_buoy__enhanced-cause",style:e.enhancedContainer,children:[a(r,{style:e.enhancedHeader,children:[o(t,{style:e.enhancedComponentName,children:h}),c&&o(r,{style:e.enhancedNativeTag,children:o(t,{style:e.enhancedNativeTagText,children:c})})]}),a(r,{style:e.enhancedFlowContainer,children:[o(t,{style:e.enhancedFlowLabel,children:"Cause:"}),s&&o(r,{style:[e.enhancedFlowBadge,{backgroundColor:s.color+"20"}],children:o(t,{style:[e.enhancedFlowBadgeText,{color:s.color}],children:s.label.toUpperCase()})}),o(t,{style:e.enhancedFlowArrow,children:"\u2192"}),o(r,{style:[e.enhancedFlowBadge,{backgroundColor:i.color+"20"}],children:o(t,{style:[e.enhancedFlowBadgeText,{color:i.color}],children:i.label})})]}),y&&a(r,{style:e.enhancedSection,children:[o(t,{style:e.enhancedSectionTitle,children:"Component State Changed:"}),n.hookChanges.map(d=>a(r,{style:e.enhancedChangeRow,children:[o(t,{style:e.enhancedChangeIcon,children:"\u26A1"}),a(t,{style:e.enhancedChangeText,children:["Hook[",d.index,"] (",d.type,"): ",d.description]})]},d.index))]}),x.length>0&&a(r,{style:e.enhancedSection,children:[o(t,{style:e.enhancedSectionTitle,children:"Native Props Changed:"}),x.map((d,f)=>a(r,{style:e.enhancedChangeRow,children:[o(t,{style:e.enhancedChangeIcon,children:"~"}),o(t,{style:e.enhancedChangeText,children:d})]},f))]}),m.length>0&&a(r,{style:e.enhancedSection,children:[o(t,{style:[e.enhancedSectionTitle,{color:l.color.textTertiary}],children:"Reference Changes (optimization opportunity):"}),m.map((d,f)=>a(r,{style:e.enhancedChangeRow,children:[o(t,{style:[e.enhancedChangeIcon,{color:l.color.textTertiary}],children:"\u25CB"}),o(t,{style:[e.enhancedChangeText,{color:l.color.textTertiary}],children:d})]},f))]}),!y&&!C&&n.type!=="mount"&&o(r,{style:e.enhancedSection,children:o(t,{style:e.enhancedNoChanges,children:n.type==="parent"?"Parent re-rendered (consider React.memo)":"No specific changes detected"})})]})}const e=b.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:l.color.border},badgeText:{fontSize:10,fontWeight:"700"},badgeTextCompact:{fontSize:9},componentBadgeText:{fontWeight:"500",textTransform:"lowercase"},arrowText:{fontSize:10,color:l.color.textTertiary},arrowTextCompact:{fontSize:9},keysText:{fontSize:11,color:l.color.textSecondary,fontFamily:p,flex:1},keysTextCompact:{fontSize:10},twoLevelContainer:{gap:8},twoLevelRow:{flexDirection:"row",alignItems:"center",flexWrap:"wrap",gap:6},twoLevelLabel:{fontSize:11,fontWeight:"600",color:l.color.textSecondary,minWidth:70},twoLevelName:{fontSize:11,fontWeight:"600",color:l.color.text,fontFamily:p},twoLevelText:{fontSize:11,color:l.color.textSecondary},twoLevelKeys:{fontSize:10,color:l.color.textSecondary,fontFamily:p},enhancedContainer:{gap:12},enhancedHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8},enhancedComponentName:{fontSize:14,fontWeight:"700",color:l.color.text,fontFamily:p},enhancedNativeTag:{backgroundColor:l.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},enhancedNativeTagText:{fontSize:10,fontWeight:"600",color:l.color.textTertiary,fontFamily:p},enhancedFlowContainer:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:12,backgroundColor:l.color.bg,borderRadius:6},enhancedFlowLabel:{fontSize:11,fontWeight:"600",color:l.color.textSecondary},enhancedFlowBadge:{paddingVertical:3,paddingHorizontal:8,borderRadius:4},enhancedFlowBadgeText:{fontSize:10,fontWeight:"700"},enhancedFlowArrow:{fontSize:14,color:l.color.textTertiary,fontWeight:"300"},enhancedSection:{gap:6},enhancedSectionTitle:{fontSize:11,fontWeight:"600",color:l.color.textSecondary,letterSpacing:.3},enhancedChangeRow:{flexDirection:"row",alignItems:"flex-start",gap:6,paddingLeft:4},enhancedChangeIcon:{fontSize:12,color:l.color.warning,fontFamily:p,width:16},enhancedChangeText:{fontSize:12,color:l.color.text,fontFamily:p,flex:1},enhancedNoChanges:{fontSize:12,color:l.color.textTertiary,fontStyle:"italic",paddingLeft:4}});export default RenderCauseBadge;