@buoy-gg/highlight-updates 3.0.1 → 4.0.1

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

@@ -1 +1,803 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RenderDetailView=RenderDetailView,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_RenderCauseBadge=require("./RenderCauseBadge"),_rendersExportFormatter=require("../utils/rendersExportFormatter"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?s:r){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?i(o,t,a):o[t]=e[t]);return o})(e,t)}const FREE_TIER_EVENT_LIMIT=5;function RenderDetailView({render:e,disableInternalFooter:t=!1,selectedEventIndex:r,onEventIndexChange:s,onAddFilter:i,isPro:a=!1}){const[o,n]=(0,_react.useState)(0),l=r??o,d=s??n,c=(0,_react.useMemo)(()=>e.renderHistory&&0!==e.renderHistory.length?[...e.renderHistory].sort((e,t)=>e.timestamp-t.timestamp):[],[e.renderHistory]),u=c.length,y=c[l],x=(0,_react.useMemo)(()=>a?0:Math.max(0,u-FREE_TIER_EVENT_LIMIT),[a,u]),_=y?.cause||e.lastRenderCause,m=(0,_react.useCallback)(()=>{l>0&&d(l-1)},[l,d]),h=(0,_react.useCallback)(()=>{const e=a?u-1:Math.min(FREE_TIER_EVENT_LIMIT-1,u-1);l<e&&d(l+1)},[l,u,d,a]),p=(0,_react.useMemo)(()=>(0,_rendersExportFormatter.generateSingleComponentExport)(e),[e]),b=e.componentName||e.displayName,j=e.viewType,C=e.lastRenderTime-e.firstRenderTime,g=C>0?(e.renderCount/(C/1e3)).toFixed(1):e.renderCount.toString(),f=!t&&u>1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.header,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerLeft,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.componentName,numberOfLines:1,children:b}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.nativeTypeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.nativeTypeText,children:j})})]}),(0,_jsxRuntime.jsx)(_sharedUi.CopyButton,{value:p,size:14})]}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.scrollView,contentContainerStyle:[styles.scrollContent,f&&{paddingBottom:100}],showsVerticalScrollIndicator:!1,children:[_&&(0,_jsxRuntime.jsx)(AnswerCard,{cause:_,renderNumber:y?.renderNumber}),(0,_jsxRuntime.jsx)(DetailsSection,{render:e,rendersPerSec:g}),x>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.lockedBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedBannerText,children:[x," ",1===x?"event":"events"," hidden"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),i&&(0,_jsxRuntime.jsx)(QuickActionsSection,{render:e,onAddFilter:i})]}),f&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:l,totalItems:u,onPrevious:m,onNext:h,itemLabel:"Render",subtitle:y?.timestamp?(0,_sharedUi.formatRelativeTime)(new Date(y.timestamp)):void 0,applySafeAreaInset:!1,absolute:!0})]})}function AnswerCard({cause:e,renderNumber:t}){const r=e.componentCause||e.type,s=e.componentCause?_RenderCauseBadge.COMPONENT_CAUSE_CONFIG[e.componentCause]:_RenderCauseBadge.CAUSE_CONFIG[e.type],i=e.hookChanges&&e.hookChanges.length>0,a=e.changedKeys&&e.changedKeys.length>0;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.answerCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.causeBadgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.causeLabel,children:"mount"===e.type?"First render":"parent"===r?"Triggered by":"Changed:"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.causeBadgeLarge,{backgroundColor:s.color+"20"}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.causeBadgeLargeText,{color:s.color}],children:s.label.toUpperCase()})})]}),i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookChangesContainer,children:e.hookChanges.map((e,t)=>{const r=`${e.type}[${e.index}]`,s={[r]:e.previousValue},i={[r]:e.currentValue};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.hookDiffContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:s,newValue:i,theme:"dark",showUnchanged:!1})},t)})}),!i&&a&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propsChangesContainer,children:e.changedKeys.filter(e=>!e.includes("(ref only)")).slice(0,5).map((e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.propChangeChip,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.propChangeText,children:e})},t))})]})}function DetailsSection({render:e,rendersPerSec:t}){const r=e.testID||e.nativeID||e.accessibilityLabel,s=e.measurements;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailsSection,children:[r&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailsCard,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailsCardTitle,children:"Identifiers"}),e.testID&&(0,_jsxRuntime.jsx)(DetailRow,{label:"testID",value:e.testID}),e.nativeID&&(0,_jsxRuntime.jsx)(DetailRow,{label:"nativeID",value:e.nativeID}),e.accessibilityLabel&&(0,_jsxRuntime.jsx)(DetailRow,{label:"a11y",value:e.accessibilityLabel})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.statValue,{color:e.color}],children:e.renderCount}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"renders"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statDivider}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statValue,children:t}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"/sec"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.statDivider}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.statItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statValue,children:e.nativeTag}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.statLabel,children:"tag"})]})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementsRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"x"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.x)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"y"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.y)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"w"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.width)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.measurementItem,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementLabel,children:"h"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.measurementValue,children:Math.round(e.measurements.height)})]})]})]})}function DetailRow({label:e,value:t}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.detailRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailLabel,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.detailValue,numberOfLines:1,children:t})]})}function QuickActionsSection({render:e,onAddFilter:t}){const[r,s]=(0,_react.useState)(null),i=(0,_react.useMemo)(()=>{const t=[];return e.nativeID&&t.push({type:"nativeID",value:e.nativeID,label:"nativeID"}),e.testID&&t.push({type:"testID",value:e.testID,label:"testID"}),e.accessibilityLabel&&t.push({type:"accessibilityLabel",value:e.accessibilityLabel,label:"a11y"}),e.componentName&&t.push({type:"component",value:e.componentName,label:"component"}),t.push({type:"viewType",value:e.viewType,label:"viewType"}),t},[e]),a=null!==r?i[r]:null,o=(0,_react.useCallback)(e=>{s(t=>t===e?null:e)},[]),n=(0,_react.useCallback)(()=>{a&&(t({type:a.type,value:a.value},"include"),s(null))},[a,t]),l=(0,_react.useCallback)(()=>{a&&(t({type:a.type,value:a.value},"exclude"),s(null))},[a,t]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.quickActionsSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.quickActionsTitle,children:"Quick Filters"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.filterOptionsList,children:i.map((e,t)=>(0,_jsxRuntime.jsx)(FilterOptionCard,{label:e.label,value:e.value,isSelected:r===t,onSelect:()=>o(t)},e.type))}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.filterActionButtons,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.filterActionButton,styles.filterActionButtonInclude,!a&&styles.filterActionButtonDisabled],onPress:n,disabled:!a,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.PlusIcon,{size:14,color:a?_sharedUi.buoyColors.success:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:a?_sharedUi.buoyColors.success:_sharedUi.buoyColors.textMuted}],children:"Only Show This"})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.filterActionButton,styles.filterActionButtonExclude,!a&&styles.filterActionButtonDisabled],onPress:l,disabled:!a,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_sharedUi.MinusIcon,{size:14,color:a?_sharedUi.buoyColors.error:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterActionButtonText,{color:a?_sharedUi.buoyColors.error:_sharedUi.buoyColors.textMuted}],children:"Hide This"})]})]})]})}function FilterOptionCard({label:e,value:t,isSelected:r,onSelect:s}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.filterOptionCard,r&&styles.filterOptionCardSelected],onPress:s,activeOpacity:.7,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterOptionLabel,r&&styles.filterOptionLabelSelected],children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.filterOptionValue,r&&styles.filterOptionValueSelected],numberOfLines:1,children:t})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},header:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12,padding:16,paddingBottom:0},scrollView:{flex:1},scrollContent:{padding:16,paddingTop:12,paddingBottom:80,gap:12},headerLeft:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:10},componentName:{fontSize:18,fontWeight:"700",color:_sharedUi.buoyColors.text,flexShrink:1},nativeTypeBadge:{backgroundColor:_sharedUi.buoyColors.input,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},answerCard:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12,gap:6},causeBadgeRow:{flexDirection:"row",alignItems:"center",gap:8},causeBadgeLarge:{paddingVertical:4,paddingHorizontal:10,borderRadius:4},causeBadgeLargeText:{fontSize:11,fontWeight:"700",letterSpacing:.5},causeLabel:{fontSize:12,color:_sharedUi.buoyColors.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:_sharedUi.buoyColors.input,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:_sharedUi.buoyColors.input,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:_sharedUi.buoyColors.text,fontFamily:"monospace"},detailsSection:{gap:10},detailsCard:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,minWidth:55},detailValue:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},statLabel:{fontSize:10,color:_sharedUi.buoyColors.textMuted,marginTop:2},statDivider:{width:1,height:24,backgroundColor:_sharedUi.buoyColors.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace"},quickActionsSection:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.buoyColors.input,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:_sharedUi.buoyColors.success,backgroundColor:_sharedUi.buoyColors.success+"15"},filterOptionLabel:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,minWidth:70},filterOptionLabelSelected:{color:_sharedUi.buoyColors.success},filterOptionValue:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",flex:1},filterOptionValueSelected:{color:_sharedUi.buoyColors.text},filterActionButtons:{flexDirection:"row",gap:8,marginTop:12},filterActionButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,paddingVertical:8,paddingHorizontal:10,borderRadius:6,borderWidth:1},filterActionButtonInclude:{backgroundColor:_sharedUi.buoyColors.success+"15",borderColor:_sharedUi.buoyColors.success+"40"},filterActionButtonExclude:{backgroundColor:_sharedUi.buoyColors.error+"15",borderColor:_sharedUi.buoyColors.error+"40"},filterActionButtonDisabled:{backgroundColor:_sharedUi.buoyColors.input,borderColor:_sharedUi.buoyColors.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:_sharedUi.buoyColors.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:_sharedUi.buoyColors.textMuted,fontSize:12}});var _default=exports.default=RenderDetailView;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderDetailView = RenderDetailView;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _RenderCauseBadge = require("./RenderCauseBadge");
+var _rendersExportFormatter = require("../utils/rendersExportFormatter");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * RenderDetailView
+ *
+ * Minimal, glanceable view for render details.
+ * Design principle: Dev should understand WHY in 3 seconds.
+ *
+ * Layout:
+ * - Header: Component name + native type
+ * - Answer Card: Cause badges + hook change (THE answer)
+ * - History Row: Compact inline navigation
+ */
+
+// Free tier limit for render history events
+const FREE_TIER_EVENT_LIMIT = 5;
+function RenderDetailView({
+  render,
+  disableInternalFooter = false,
+  selectedEventIndex: externalIndex,
+  onEventIndexChange: externalOnChange,
+  onAddFilter,
+  isPro = false
+}) {
+  // Internal state for event index when not controlled externally
+  const [internalIndex, setInternalIndex] = (0, _react.useState)(0);
+
+  // Use external or internal state
+  const selectedEventIndex = externalIndex ?? internalIndex;
+  const onEventIndexChange = externalOnChange ?? setInternalIndex;
+
+  // Get events sorted by timestamp (oldest first)
+  const events = (0, _react.useMemo)(() => {
+    if (!render.renderHistory || render.renderHistory.length === 0) {
+      return [];
+    }
+    return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
+  }, [render.renderHistory]);
+  const totalEvents = events.length;
+  const currentEvent = events[selectedEventIndex];
+
+  // Calculate hidden events for free tier
+  const hiddenEventCount = (0, _react.useMemo)(() => {
+    if (isPro) return 0;
+    return Math.max(0, totalEvents - FREE_TIER_EVENT_LIMIT);
+  }, [isPro, totalEvents]);
+
+  // Use current event's cause if available, otherwise fall back to lastRenderCause
+  const displayCause = currentEvent?.cause || render.lastRenderCause;
+
+  // Navigation handlers
+  const goToPrevious = (0, _react.useCallback)(() => {
+    if (selectedEventIndex > 0) {
+      onEventIndexChange(selectedEventIndex - 1);
+    }
+  }, [selectedEventIndex, onEventIndexChange]);
+  const goToNext = (0, _react.useCallback)(() => {
+    // Limit navigation for free tier users
+    const maxIndex = isPro ? totalEvents - 1 : Math.min(FREE_TIER_EVENT_LIMIT - 1, totalEvents - 1);
+    if (selectedEventIndex < maxIndex) {
+      onEventIndexChange(selectedEventIndex + 1);
+    }
+  }, [selectedEventIndex, totalEvents, onEventIndexChange, isPro]);
+
+  // Memoize copy data
+  const copyData = (0, _react.useMemo)(() => (0, _rendersExportFormatter.generateSingleComponentExport)(render), [render]);
+
+  // Get component name (prefer componentName, fall back to displayName)
+  const componentName = render.componentName || render.displayName;
+  const nativeType = render.viewType;
+
+  // Calculate render stats
+  const renderDuration = render.lastRenderTime - render.firstRenderTime;
+  const rendersPerSec = renderDuration > 0 ? (render.renderCount / (renderDuration / 1000)).toFixed(1) : render.renderCount.toString();
+
+  // Determine if we should show footer (either history or filters)
+  const showHistoryFooter = !disableInternalFooter && totalEvents > 1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.headerLeft,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.componentName,
+          numberOfLines: 1,
+          children: componentName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.nativeTypeBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.nativeTypeText,
+            children: nativeType
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
+        value: copyData,
+        size: 14
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.scrollView,
+      contentContainerStyle: [styles.scrollContent, showHistoryFooter && {
+        paddingBottom: 100
+      }],
+      showsVerticalScrollIndicator: false,
+      children: [displayCause && /*#__PURE__*/(0, _jsxRuntime.jsx)(AnswerCard, {
+        cause: displayCause,
+        renderNumber: currentEvent?.renderNumber
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailsSection, {
+        render: render,
+        rendersPerSec: rendersPerSec
+      }), hiddenEventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.lockedBanner,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+          size: 14,
+          color: _sharedUi.buoyColors.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.lockedBannerText,
+          children: [hiddenEventCount, " ", hiddenEventCount === 1 ? 'event' : 'events', " hidden"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.lockedBannerSubtext,
+          children: "Upgrade to Pro"
+        })]
+      }), onAddFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(QuickActionsSection, {
+        render: render,
+        onAddFilter: onAddFilter
+      })]
+    }), showHistoryFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+      currentIndex: selectedEventIndex,
+      totalItems: totalEvents,
+      onPrevious: goToPrevious,
+      onNext: goToNext,
+      itemLabel: "Render",
+      subtitle: currentEvent?.timestamp ? (0, _sharedUi.formatRelativeTime)(new Date(currentEvent.timestamp)) : undefined,
+      applySafeAreaInset: false,
+      absolute: true
+    })]
+  });
+}
+
+/**
+ * AnswerCard - The hero section showing WHY the component rendered
+ * Design: Single badge + what changed below it
+ */
+function AnswerCard({
+  cause,
+  renderNumber
+}) {
+  // Use component cause if available, otherwise native cause
+  const displayCauseType = cause.componentCause || cause.type;
+  const config = cause.componentCause ? _RenderCauseBadge.COMPONENT_CAUSE_CONFIG[cause.componentCause] : _RenderCauseBadge.CAUSE_CONFIG[cause.type];
+  const hasHookChanges = cause.hookChanges && cause.hookChanges.length > 0;
+  const hasChangedKeys = cause.changedKeys && cause.changedKeys.length > 0;
+
+  // Get contextual label based on cause type
+  const getLabel = () => {
+    if (cause.type === "mount") return "First render";
+    if (displayCauseType === "parent") return "Triggered by";
+    return "Changed:";
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.answerCard,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.causeBadgeRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.causeLabel,
+        children: getLabel()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.causeBadgeLarge, {
+          backgroundColor: config.color + "20"
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.causeBadgeLargeText, {
+            color: config.color
+          }],
+          children: config.label.toUpperCase()
+        })
+      })]
+    }), hasHookChanges && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.hookChangesContainer,
+      children: cause.hookChanges.map((hook, index) => {
+        const hookKey = `${hook.type}[${hook.index}]`;
+        const oldValue = {
+          [hookKey]: hook.previousValue
+        };
+        const newValue = {
+          [hookKey]: hook.currentValue
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.hookDiffContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+            oldValue: oldValue,
+            newValue: newValue,
+            theme: "dark",
+            showUnchanged: false
+          })
+        }, index);
+      })
+    }), !hasHookChanges && hasChangedKeys && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.propsChangesContainer,
+      children: cause.changedKeys.filter(k => !k.includes("(ref only)")).slice(0, 5).map((key, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.propChangeChip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.propChangeText,
+          children: key
+        })
+      }, index))
+    })]
+  });
+}
+
+/**
+ * DetailsSection - Component identifiers, measurements, and stats
+ * Helps devs find the component in their codebase
+ */
+function DetailsSection({
+  render,
+  rendersPerSec
+}) {
+  const hasIdentifiers = render.testID || render.nativeID || render.accessibilityLabel;
+  const hasMeasurements = render.measurements;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.detailsSection,
+    children: [hasIdentifiers && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.detailsCard,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.detailsCardTitle,
+        children: "Identifiers"
+      }), render.testID && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailRow, {
+        label: "testID",
+        value: render.testID
+      }), render.nativeID && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailRow, {
+        label: "nativeID",
+        value: render.nativeID
+      }), render.accessibilityLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailRow, {
+        label: "a11y",
+        value: render.accessibilityLabel
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.statsRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.statValue, {
+            color: render.color
+          }],
+          children: render.renderCount
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.statLabel,
+          children: "renders"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.statDivider
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.statValue,
+          children: rendersPerSec
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.statLabel,
+          children: "/sec"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.statDivider
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.statItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.statValue,
+          children: render.nativeTag
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.statLabel,
+          children: "tag"
+        })]
+      })]
+    }), hasMeasurements && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.measurementsRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.measurementItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementLabel,
+          children: "x"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementValue,
+          children: Math.round(render.measurements.x)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.measurementItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementLabel,
+          children: "y"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementValue,
+          children: Math.round(render.measurements.y)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.measurementItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementLabel,
+          children: "w"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementValue,
+          children: Math.round(render.measurements.width)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.measurementItem,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementLabel,
+          children: "h"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.measurementValue,
+          children: Math.round(render.measurements.height)
+        })]
+      })]
+    })]
+  });
+}
+
+/**
+ * DetailRow - Single row for identifier display
+ */
+function DetailRow({
+  label,
+  value
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.detailRow,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.detailLabel,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.detailValue,
+      numberOfLines: 1,
+      children: value
+    })]
+  });
+}
+
+/**
+ * QuickActionsSection - Quick filter actions for the component
+ * Users select a filter option, then use action buttons to include/exclude
+ */
+function QuickActionsSection({
+  render,
+  onAddFilter
+}) {
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(null);
+
+  // Build list of available filter options (most specific to most general)
+  const filterOptions = (0, _react.useMemo)(() => {
+    const options = [];
+
+    // Most specific first
+    if (render.nativeID) {
+      options.push({
+        type: "nativeID",
+        value: render.nativeID,
+        label: "nativeID"
+      });
+    }
+    if (render.testID) {
+      options.push({
+        type: "testID",
+        value: render.testID,
+        label: "testID"
+      });
+    }
+    if (render.accessibilityLabel) {
+      options.push({
+        type: "accessibilityLabel",
+        value: render.accessibilityLabel,
+        label: "a11y"
+      });
+    }
+    if (render.componentName) {
+      options.push({
+        type: "component",
+        value: render.componentName,
+        label: "component"
+      });
+    }
+    // Most general last (always available)
+    options.push({
+      type: "viewType",
+      value: render.viewType,
+      label: "viewType"
+    });
+    return options;
+  }, [render]);
+  const selectedOption = selectedIndex !== null ? filterOptions[selectedIndex] : null;
+  const handleSelectOption = (0, _react.useCallback)(index => {
+    setSelectedIndex(prev => prev === index ? null : index);
+  }, []);
+  const handleInclude = (0, _react.useCallback)(() => {
+    if (selectedOption) {
+      onAddFilter({
+        type: selectedOption.type,
+        value: selectedOption.value
+      }, "include");
+      setSelectedIndex(null);
+    }
+  }, [selectedOption, onAddFilter]);
+  const handleExclude = (0, _react.useCallback)(() => {
+    if (selectedOption) {
+      onAddFilter({
+        type: selectedOption.type,
+        value: selectedOption.value
+      }, "exclude");
+      setSelectedIndex(null);
+    }
+  }, [selectedOption, onAddFilter]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.quickActionsSection,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.quickActionsTitle,
+      children: "Quick Filters"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.filterOptionsList,
+      children: filterOptions.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterOptionCard, {
+        label: option.label,
+        value: option.value,
+        isSelected: selectedIndex === index,
+        onSelect: () => handleSelectOption(index)
+      }, option.type))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.filterActionButtons,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.filterActionButton, styles.filterActionButtonInclude, !selectedOption && styles.filterActionButtonDisabled],
+        onPress: handleInclude,
+        disabled: !selectedOption,
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PlusIcon, {
+          size: 14,
+          color: selectedOption ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textMuted
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.filterActionButtonText, {
+            color: selectedOption ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textMuted
+          }],
+          children: "Only Show This"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.filterActionButton, styles.filterActionButtonExclude, !selectedOption && styles.filterActionButtonDisabled],
+        onPress: handleExclude,
+        disabled: !selectedOption,
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.MinusIcon, {
+          size: 14,
+          color: selectedOption ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textMuted
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.filterActionButtonText, {
+            color: selectedOption ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textMuted
+          }],
+          children: "Hide This"
+        })]
+      })]
+    })]
+  });
+}
+
+/**
+ * FilterOptionCard - A selectable filter option card
+ */
+function FilterOptionCard({
+  label,
+  value,
+  isSelected,
+  onSelect
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.filterOptionCard, isSelected && styles.filterOptionCardSelected],
+    onPress: onSelect,
+    activeOpacity: 0.7,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.filterOptionLabel, isSelected && styles.filterOptionLabelSelected],
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.filterOptionValue, isSelected && styles.filterOptionValueSelected],
+      numberOfLines: 1,
+      children: value
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  // Header
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    padding: 16,
+    paddingBottom: 0
+  },
+  // ScrollView
+  scrollView: {
+    flex: 1
+  },
+  scrollContent: {
+    padding: 16,
+    paddingTop: 12,
+    paddingBottom: 80,
+    gap: 12
+  },
+  headerLeft: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10
+  },
+  componentName: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.text,
+    flexShrink: 1
+  },
+  nativeTypeBadge: {
+    backgroundColor: _sharedUi.buoyColors.input,
+    paddingVertical: 3,
+    paddingHorizontal: 8,
+    borderRadius: 4
+  },
+  nativeTypeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  // Answer Card
+  answerCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12,
+    gap: 6
+  },
+  causeBadgeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  causeBadgeLarge: {
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 4
+  },
+  causeBadgeLargeText: {
+    fontSize: 11,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  causeLabel: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontWeight: "500"
+  },
+  hookChangesContainer: {
+    gap: 6
+  },
+  hookDiffContainer: {
+    backgroundColor: _sharedUi.buoyColors.input,
+    borderRadius: 6,
+    overflow: "hidden"
+  },
+  propsChangesContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 4
+  },
+  propChangeChip: {
+    backgroundColor: _sharedUi.buoyColors.input,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    borderRadius: 4
+  },
+  propChangeText: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace"
+  },
+  // Details Section
+  detailsSection: {
+    gap: 10
+  },
+  detailsCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12,
+    gap: 6
+  },
+  detailsCardTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    marginBottom: 4
+  },
+  detailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  detailLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    minWidth: 55
+  },
+  detailValue: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  // Stats Row
+  statsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    paddingVertical: 10,
+    paddingHorizontal: 16
+  },
+  statItem: {
+    flex: 1,
+    alignItems: "center"
+  },
+  statValue: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace"
+  },
+  statLabel: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    marginTop: 2
+  },
+  statDivider: {
+    width: 1,
+    height: 24,
+    backgroundColor: _sharedUi.buoyColors.border,
+    marginHorizontal: 12
+  },
+  // Measurements Row
+  measurementsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    paddingVertical: 8,
+    paddingHorizontal: 12
+  },
+  measurementItem: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 4
+  },
+  measurementLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    textTransform: "uppercase"
+  },
+  measurementValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace"
+  },
+  // Quick Actions Section
+  quickActionsSection: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12,
+    gap: 10
+  },
+  quickActionsTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    marginBottom: 2
+  },
+  filterOptionsList: {
+    gap: 6
+  },
+  filterOptionCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.buoyColors.input,
+    borderRadius: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderWidth: 1,
+    borderColor: "transparent",
+    gap: 10
+  },
+  filterOptionCardSelected: {
+    borderColor: _sharedUi.buoyColors.success,
+    backgroundColor: _sharedUi.buoyColors.success + "15"
+  },
+  filterOptionLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textMuted,
+    minWidth: 70
+  },
+  filterOptionLabelSelected: {
+    color: _sharedUi.buoyColors.success
+  },
+  filterOptionValue: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  filterOptionValueSelected: {
+    color: _sharedUi.buoyColors.text
+  },
+  filterActionButtons: {
+    flexDirection: "row",
+    gap: 8,
+    marginTop: 12
+  },
+  filterActionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  filterActionButtonInclude: {
+    backgroundColor: _sharedUi.buoyColors.success + "15",
+    borderColor: _sharedUi.buoyColors.success + "40"
+  },
+  filterActionButtonExclude: {
+    backgroundColor: _sharedUi.buoyColors.error + "15",
+    borderColor: _sharedUi.buoyColors.error + "40"
+  },
+  filterActionButtonDisabled: {
+    backgroundColor: _sharedUi.buoyColors.input,
+    borderColor: _sharedUi.buoyColors.border,
+    opacity: 0.5
+  },
+  filterActionButtonText: {
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  // Locked Banner
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.warning + "40",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 8
+  },
+  lockedBannerText: {
+    color: _sharedUi.buoyColors.warning,
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  lockedBannerSubtext: {
+    color: _sharedUi.buoyColors.textMuted,
+    fontSize: 12
+  }
+});
+var _default = exports.default = RenderDetailView;