@buoy-gg/highlight-updates 2.1.10 → 2.1.11

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

@@ -1 +1,894 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RenderHistoryFooter=RenderHistoryFooter,exports.RenderHistoryViewer=RenderHistoryViewer,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"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(a,t,s):a[t]=e[t]);return a})(e,t)}const FREE_TIER_EVENT_LIMIT=3;function formatTimeWithMs(e){const t=new Date(e);return t.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})+`.${t.getMilliseconds().toString().padStart(3,"0")}`}function RenderHistoryViewer({render:e,disableInternalFooter:t=!1,selectedEventIndex:r,onEventIndexChange:i,isPro:o=!1}){const[s,a]=(0,_react.useState)(0),n=r??s,l=i??a,[d,c]=(0,_react.useState)("current"),u=(0,_react.useMemo)(()=>e.renderHistory&&0!==e.renderHistory.length?[...e.renderHistory].sort((e,t)=>e.timestamp-t.timestamp):[],[e.renderHistory]),x=(0,_react.useMemo)(()=>o?u:u.slice(-FREE_TIER_EVENT_LIMIT),[u,o]),y=(0,_react.useMemo)(()=>o?0:Math.max(0,u.length-FREE_TIER_EVENT_LIMIT),[u.length,o]),_=x.length,m=x[n],h=n>0?x[n-1]:null,f=(0,_react.useCallback)(()=>{n>0&&l(n-1)},[n,l]),g=(0,_react.useCallback)(()=>{n<_-1&&l(n+1)},[n,_,l]);return 0===_?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:32,color:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No Render History"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:"Enable render history tracking in settings to see render events here."})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.container,{paddingBottom:!t&&_>1?80:0}],children:[y>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:[y," older ",1===y?"render":"renders"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedBannerSubtext,children:"Upgrade to Pro"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.viewToggleCard,"current"===d&&styles.viewToggleCardActive],onPress:()=>c("current"),activeOpacity:.8,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.Database,{size:16,color:"current"===d?_sharedUi.buoyColors.primary:_sharedUi.buoyColors.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleLabel,"current"===d&&styles.viewToggleLabelActive],children:"CURRENT STATE"})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.viewToggleDescription,"current"===d&&{color:_sharedUi.buoyColors.text}],children:["View render #",m?.renderNumber??0," details"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.viewToggleCard,styles.viewToggleCardDisabled],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.viewToggleContent,children:[(0,_jsxRuntime.jsx)(_sharedUi.GitBranch,{size:16,color:_sharedUi.buoyColors.textMuted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleLabel,styles.viewToggleLabelDisabled],children:"DIFF VIEW"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.todoBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.todoBadgeText,children:"TODO"})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.viewToggleDescription,{color:_sharedUi.buoyColors.textMuted}],children:"Compare renders side by side (coming soon)"})]})]}),(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:styles.contentScroll,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:!1,children:"current"===d?(0,_jsxRuntime.jsx)(CurrentStateView,{event:m,render:e}):(0,_jsxRuntime.jsx)(DiffView,{previousEvent:h,currentEvent:m,render:e})})]}),!t&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n,totalItems:_,onPrevious:f,onNext:g,itemLabel:"Render",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(m?.timestamp??Date.now()))})]})}function CurrentStateView({event:e,render:t}){if(!e)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noEventContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noEventText,children:"No event selected"})});const r=_RenderCauseBadge.CAUSE_CONFIG[e.cause.type];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.currentStateContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.eventHeader,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.eventHeaderLeft,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.eventTitle,children:["Render #",e.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.eventTime,children:formatTimeWithMs(e.timestamp)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.eventBadge,{backgroundColor:t.color+"30"}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.eventBadgeDot,{backgroundColor:t.color}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.eventBadgeText,{color:t.color}],children:e.cause.type.toUpperCase()})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Clock,color:r.color,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"WHY DID THIS RENDER?"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionContent,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay,{cause:e.cause,nativeType:t.viewType})})]}),e.capturedProps&&Object.keys(e.capturedProps).length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsxs)(_sharedUi.SectionHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon,{icon:_sharedUi.Database,color:_sharedUi.buoyColors.primary,size:12}),(0,_jsxRuntime.jsx)(_sharedUi.SectionHeader.Title,{children:"CAPTURED PROPS"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.sectionContent,children:(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,style:styles.propsScrollView,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.propsJson,children:JSON.stringify(e.capturedProps,null,2)})})})]})]})}function DiffView({previousEvent:e,currentEvent:t,render:r}){const[i,o]=(0,_react.useState)("props");if(!e||!t)return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noEventContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noEventText,children:"Select an event with a previous event to compare"})});const s=_RenderCauseBadge.CAUSE_CONFIG[e.cause.type],a=_RenderCauseBadge.CAUSE_CONFIG[t.cause.type],n=e.capturedProps&&t.capturedProps,l=e.capturedState&&t.capturedState;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareBar,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareSide,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareLabelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareLabel,{color:_sharedUi.buoyColors.warning}],children:"PREV"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.compareActionBadge,{backgroundColor:`${s.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:s.color}],children:e.cause.type.toUpperCase()})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareMeta,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.compareIndex,children:["#",e.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.compareTime,children:formatTimeWithMs(e.timestamp)})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.compareDivider,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.compareArrow,children:"→"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareSide,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareLabelRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareLabel,{color:_sharedUi.buoyColors.success}],children:"CUR"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.compareActionBadge,{backgroundColor:`${a.color}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.compareActionText,{color:a.color}],children:t.cause.type.toUpperCase()})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.compareMeta,children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.compareIndex,children:["#",t.renderNumber]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.compareTime,children:formatTimeWithMs(t.timestamp)})]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffModeTabs,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,"cause"===i&&styles.diffModeTabActive],onPress:()=>o("cause"),activeOpacity:.7,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,"cause"===i&&styles.diffModeTabTextActive],children:"CAUSE"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,"props"===i&&styles.diffModeTabActive,!n&&styles.diffModeTabDisabled],onPress:()=>n&&o("props"),activeOpacity:n?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,"props"===i&&styles.diffModeTabTextActive,!n&&styles.diffModeTabTextDisabled],children:"PROPS"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:[styles.diffModeTab,"state"===i&&styles.diffModeTabActive,!l&&styles.diffModeTabDisabled],onPress:()=>l&&o("state"),activeOpacity:l?.7:1,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffModeTabText,"state"===i&&styles.diffModeTabTextActive,!l&&styles.diffModeTabTextDisabled],children:"STATE"})})]}),"cause"===i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffSummary,children:(0,_jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay,{cause:t.cause,nativeType:r.viewType})}),"props"===i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:n?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedProps,newValue:t.capturedProps,theme:"dark",showUnchanged:!0}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.noDiffData,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataTitle,children:"Props Not Captured"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),"state"===i&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.treeDiffContainer,children:l?(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:e.capturedState,newValue:t.capturedState,theme:"dark",showUnchanged:!0}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.noDiffData,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataTitle,children:"State Not Captured"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}function RenderHistoryFooter({render:e,selectedEventIndex:t=0,onEventIndexChange:r=()=>{},isPro:i=!1}){const o=(0,_react.useMemo)(()=>e.renderHistory&&0!==e.renderHistory.length?[...e.renderHistory].sort((e,t)=>e.timestamp-t.timestamp):[],[e.renderHistory]),s=(0,_react.useMemo)(()=>i?o:o.slice(-FREE_TIER_EVENT_LIMIT),[o,i]),a=s.length,n=s[t],l=(0,_react.useCallback)(()=>{r(Math.max(0,t-1))},[t,r]),d=(0,_react.useCallback)(()=>{r(Math.min(a-1,t+1))},[t,a,r]);return a<=1?null:(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:t,totalItems:a,onPrevious:l,onNext:d,itemLabel:"Render",subtitle:n?(0,_sharedUi.formatRelativeTime)(new Date(n.timestamp)):void 0})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:_sharedUi.buoyColors.text},emptyText:{fontSize:13,color:_sharedUi.buoyColors.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:10,gap:4},viewToggleCardActive:{borderColor:_sharedUi.buoyColors.primary,backgroundColor:_sharedUi.buoyColors.primary+"10"},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:_sharedUi.buoyColors.textMuted+"30",paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.textMuted,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:_sharedUi.buoyColors.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:_sharedUi.buoyColors.primary},viewToggleLabelDisabled:{color:_sharedUi.buoyColors.textMuted},viewToggleDescription:{fontSize:11,color:_sharedUi.buoyColors.textMuted,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:_sharedUi.buoyColors.textMuted},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:_sharedUi.buoyColors.text},eventTime:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},eventBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4,borderRadius:12,gap:6},eventBadgeDot:{width:6,height:6,borderRadius:3},eventBadgeText:{fontSize:10,fontWeight:"700",fontFamily:"monospace"},section:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:"monospace",color:_sharedUi.buoyColors.text,backgroundColor:_sharedUi.buoyColors.input,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:10},compareSide:{flex:1,gap:4},compareLabelRow:{flexDirection:"row",alignItems:"center",gap:8},compareLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5},compareActionBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},compareActionText:{fontSize:9,fontWeight:"600"},compareMeta:{flexDirection:"row",alignItems:"center",gap:6},compareIndex:{fontSize:12,fontWeight:"600",color:_sharedUi.buoyColors.text},compareTime:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:_sharedUi.buoyColors.textMuted},diffSummary:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:_sharedUi.buoyColors.warning,fontFamily:"monospace"},diffChangeKey:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace"},diffNoChanges:{fontSize:12,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:_sharedUi.buoyColors.textMuted,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:_sharedUi.buoyColors.primary+"20"},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:_sharedUi.buoyColors.primary},diffModeTabTextDisabled:{color:_sharedUi.buoyColors.textMuted},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:_sharedUi.buoyColors.text,fontFamily:"monospace",fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:_sharedUi.buoyColors.text},noDiffDataText:{fontSize:12,color:_sharedUi.buoyColors.textMuted,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"30",gap:8},lockedBannerText:{color:_sharedUi.buoyColors.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:_sharedUi.buoyColors.textMuted,fontSize:12}});var _default=exports.default=RenderHistoryViewer;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderHistoryFooter = RenderHistoryFooter;
+exports.RenderHistoryViewer = RenderHistoryViewer;
+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 _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); }
+/**
+ * RenderHistoryViewer
+ *
+ * Displays render history for a component with event stepping.
+ * Allows navigating through render events chronologically.
+ * Shows current state view or diff view between renders.
+ */
+
+// Free tier limit for render history events
+const FREE_TIER_EVENT_LIMIT = 3;
+/**
+ * Format timestamp with milliseconds
+ */
+function formatTimeWithMs(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  }) + `.${date.getMilliseconds().toString().padStart(3, "0")}`;
+}
+
+/**
+ * Main RenderHistoryViewer component
+ */
+function RenderHistoryViewer({
+  render,
+  disableInternalFooter = false,
+  selectedEventIndex: externalIndex,
+  onEventIndexChange: externalOnChange,
+  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;
+
+  // View mode: "current" shows selected event, "diff" shows comparison
+  const [activeView, setActiveView] = (0, _react.useState)("current");
+
+  // Get all events sorted by timestamp (oldest first)
+  const allEvents = (0, _react.useMemo)(() => {
+    if (!render.renderHistory || render.renderHistory.length === 0) {
+      return [];
+    }
+    return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
+  }, [render.renderHistory]);
+
+  // Limit visible events for free tier (show most recent N events)
+  const events = (0, _react.useMemo)(() => {
+    if (isPro) return allEvents;
+    // Take the most recent events (last N in the sorted list)
+    return allEvents.slice(-FREE_TIER_EVENT_LIMIT);
+  }, [allEvents, isPro]);
+
+  // Calculate how many events are locked
+  const lockedEventCount = (0, _react.useMemo)(() => {
+    if (isPro) return 0;
+    return Math.max(0, allEvents.length - FREE_TIER_EVENT_LIMIT);
+  }, [allEvents.length, isPro]);
+  const totalEvents = events.length;
+  const currentEvent = events[selectedEventIndex];
+  const previousEvent = selectedEventIndex > 0 ? events[selectedEventIndex - 1] : null;
+
+  // Navigation handlers
+  const goToPrevious = (0, _react.useCallback)(() => {
+    if (selectedEventIndex > 0) {
+      onEventIndexChange(selectedEventIndex - 1);
+    }
+  }, [selectedEventIndex, onEventIndexChange]);
+  const goToNext = (0, _react.useCallback)(() => {
+    if (selectedEventIndex < totalEvents - 1) {
+      onEventIndexChange(selectedEventIndex + 1);
+    }
+  }, [selectedEventIndex, totalEvents, onEventIndexChange]);
+
+  // If no history, show empty state
+  if (totalEvents === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.emptyContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
+        size: 32,
+        color: _sharedUi.buoyColors.textMuted
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyTitle,
+        children: "No Render History"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyText,
+        children: "Enable render history tracking in settings to see render events here."
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.container, {
+        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
+      }],
+      children: [lockedEventCount > 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: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.lockedBannerSubtext,
+          children: "Upgrade to Pro"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.viewToggleContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: [styles.viewToggleCard, activeView === "current" && styles.viewToggleCardActive],
+          onPress: () => setActiveView("current"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Database, {
+              size: 16,
+              color: activeView === "current" ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.viewToggleLabel, activeView === "current" && styles.viewToggleLabelActive],
+              children: "CURRENT STATE"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: [styles.viewToggleDescription, activeView === "current" && {
+              color: _sharedUi.buoyColors.text
+            }],
+            children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.viewToggleCard, styles.viewToggleCardDisabled],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
+              size: 16,
+              color: _sharedUi.buoyColors.textMuted
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.viewToggleLabel, styles.viewToggleLabelDisabled],
+              children: "DIFF VIEW"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.todoBadge,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.todoBadgeText,
+                children: "TODO"
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.viewToggleDescription, {
+              color: _sharedUi.buoyColors.textMuted
+            }],
+            children: "Compare renders side by side (coming soon)"
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.contentScroll,
+        contentContainerStyle: styles.contentContainer,
+        showsVerticalScrollIndicator: false,
+        children: activeView === "current" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CurrentStateView, {
+          event: currentEvent,
+          render: render
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DiffView, {
+          previousEvent: previousEvent,
+          currentEvent: currentEvent,
+          render: render
+        })
+      })]
+    }), !disableInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+      currentIndex: selectedEventIndex,
+      totalItems: totalEvents,
+      onPrevious: goToPrevious,
+      onNext: goToNext,
+      itemLabel: "Render",
+      subtitle: (0, _sharedUi.formatRelativeTime)(new Date(currentEvent?.timestamp ?? Date.now()))
+    })]
+  });
+}
+
+/**
+ * Current State View - shows details of the selected render event
+ */
+function CurrentStateView({
+  event,
+  render
+}) {
+  if (!event) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.noEventContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.noEventText,
+        children: "No event selected"
+      })
+    });
+  }
+  const causeConfig = _RenderCauseBadge.CAUSE_CONFIG[event.cause.type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.currentStateContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.eventHeader,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.eventHeaderLeft,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.eventTitle,
+          children: ["Render #", event.renderNumber]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.eventTime,
+          children: formatTimeWithMs(event.timestamp)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.eventBadge, {
+          backgroundColor: render.color + "30"
+        }],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.eventBadgeDot, {
+            backgroundColor: render.color
+          }]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.eventBadgeText, {
+            color: render.color
+          }],
+          children: event.cause.type.toUpperCase()
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+          icon: _sharedUi.Clock,
+          color: causeConfig.color,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+          children: "WHY DID THIS RENDER?"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay, {
+          cause: event.cause,
+          nativeType: render.viewType
+        })
+      })]
+    }), event.capturedProps && Object.keys(event.capturedProps).length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Icon, {
+          icon: _sharedUi.Database,
+          color: _sharedUi.buoyColors.primary,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SectionHeader.Title, {
+          children: "CAPTURED PROPS"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sectionContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          style: styles.propsScrollView,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.propsJson,
+            children: JSON.stringify(event.capturedProps, null, 2)
+          })
+        })
+      })]
+    })]
+  });
+}
+
+/**
+ * Diff mode types
+ */
+
+/**
+ * Diff View - shows comparison between two render events
+ */
+function DiffView({
+  previousEvent,
+  currentEvent,
+  render
+}) {
+  // Diff mode tab state
+  const [diffMode, setDiffMode] = (0, _react.useState)("props");
+  if (!previousEvent || !currentEvent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.noEventContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.noEventText,
+        children: "Select an event with a previous event to compare"
+      })
+    });
+  }
+  const prevCauseConfig = _RenderCauseBadge.CAUSE_CONFIG[previousEvent.cause.type];
+  const currCauseConfig = _RenderCauseBadge.CAUSE_CONFIG[currentEvent.cause.type];
+
+  // Check what data is available for diff
+  const hasPropsData = previousEvent.capturedProps && currentEvent.capturedProps;
+  const hasStateData = previousEvent.capturedState && currentEvent.capturedState;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.diffContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.compareBar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.compareSide,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.compareLabelRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.compareLabel, {
+              color: _sharedUi.buoyColors.warning
+            }],
+            children: "PREV"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.compareActionBadge, {
+              backgroundColor: `${prevCauseConfig.color}20`
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.compareActionText, {
+                color: prevCauseConfig.color
+              }],
+              children: previousEvent.cause.type.toUpperCase()
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.compareMeta,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.compareIndex,
+            children: ["#", previousEvent.renderNumber]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.compareTime,
+            children: formatTimeWithMs(previousEvent.timestamp)
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.compareDivider,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.compareArrow,
+          children: "\u2192"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.compareSide,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.compareLabelRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.compareLabel, {
+              color: _sharedUi.buoyColors.success
+            }],
+            children: "CUR"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.compareActionBadge, {
+              backgroundColor: `${currCauseConfig.color}20`
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.compareActionText, {
+                color: currCauseConfig.color
+              }],
+              children: currentEvent.cause.type.toUpperCase()
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.compareMeta,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.compareIndex,
+            children: ["#", currentEvent.renderNumber]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.compareTime,
+            children: formatTimeWithMs(currentEvent.timestamp)
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.diffModeTabs,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.diffModeTab, diffMode === "cause" && styles.diffModeTabActive],
+        onPress: () => setDiffMode("cause"),
+        activeOpacity: 0.7,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.diffModeTabText, diffMode === "cause" && styles.diffModeTabTextActive],
+          children: "CAUSE"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.diffModeTab, diffMode === "props" && styles.diffModeTabActive, !hasPropsData && styles.diffModeTabDisabled],
+        onPress: () => hasPropsData && setDiffMode("props"),
+        activeOpacity: hasPropsData ? 0.7 : 1,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.diffModeTabText, diffMode === "props" && styles.diffModeTabTextActive, !hasPropsData && styles.diffModeTabTextDisabled],
+          children: "PROPS"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.diffModeTab, diffMode === "state" && styles.diffModeTabActive, !hasStateData && styles.diffModeTabDisabled],
+        onPress: () => hasStateData && setDiffMode("state"),
+        activeOpacity: hasStateData ? 0.7 : 1,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.diffModeTabText, diffMode === "state" && styles.diffModeTabTextActive, !hasStateData && styles.diffModeTabTextDisabled],
+          children: "STATE"
+        })
+      })]
+    }), diffMode === "cause" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.diffSummary,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderCauseBadge.EnhancedCauseDisplay, {
+        cause: currentEvent.cause,
+        nativeType: render.viewType
+      })
+    }), diffMode === "props" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.treeDiffContainer,
+      children: hasPropsData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+        oldValue: previousEvent.capturedProps,
+        newValue: currentEvent.capturedProps,
+        theme: "dark",
+        showUnchanged: true
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.noDiffData,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noDiffDataTitle,
+          children: "Props Not Captured"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noDiffDataText,
+          children: "Enable \"Capture Props on Render\" in settings to see props diff."
+        })]
+      })
+    }), diffMode === "state" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.treeDiffContainer,
+      children: hasStateData ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+        oldValue: previousEvent.capturedState,
+        newValue: currentEvent.capturedState,
+        theme: "dark",
+        showUnchanged: true
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.noDiffData,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noDiffDataTitle,
+          children: "State Not Captured"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.noDiffDataText,
+          children: "Enable \"Capture State on Render\" in settings to see state diff."
+        })]
+      })
+    })]
+  });
+}
+
+/**
+ * External footer component for modal integration
+ * Uses renderHistory for events (only available when history tracking is enabled)
+ */
+function RenderHistoryFooter({
+  render,
+  selectedEventIndex = 0,
+  onEventIndexChange = () => {},
+  isPro = false
+}) {
+  // Get all events from render history (sorted by timestamp)
+  const allEvents = (0, _react.useMemo)(() => {
+    if (!render.renderHistory || render.renderHistory.length === 0) {
+      return [];
+    }
+    return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
+  }, [render.renderHistory]);
+
+  // Limit visible events for free tier (show most recent N events)
+  const events = (0, _react.useMemo)(() => {
+    if (isPro) return allEvents;
+    return allEvents.slice(-FREE_TIER_EVENT_LIMIT);
+  }, [allEvents, isPro]);
+  const totalEvents = events.length;
+  const currentEvent = events[selectedEventIndex];
+  const goToPrevious = (0, _react.useCallback)(() => {
+    onEventIndexChange(Math.max(0, selectedEventIndex - 1));
+  }, [selectedEventIndex, onEventIndexChange]);
+  const goToNext = (0, _react.useCallback)(() => {
+    onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1));
+  }, [selectedEventIndex, totalEvents, onEventIndexChange]);
+
+  // Don't render if no history events (history tracking might be disabled)
+  if (totalEvents <= 1) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    currentIndex: selectedEventIndex,
+    totalItems: totalEvents,
+    onPrevious: goToPrevious,
+    onNext: goToNext,
+    itemLabel: "Render",
+    subtitle: currentEvent ? (0, _sharedUi.formatRelativeTime)(new Date(currentEvent.timestamp)) : undefined
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 32,
+    gap: 12
+  },
+  emptyTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text
+  },
+  emptyText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textSecondary,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  viewToggleContainer: {
+    flexDirection: "row",
+    padding: 12,
+    gap: 8
+  },
+  viewToggleCard: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 10,
+    gap: 4
+  },
+  viewToggleCardActive: {
+    borderColor: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.buoyColors.primary + "10"
+  },
+  viewToggleCardDisabled: {
+    opacity: 0.5
+  },
+  todoBadge: {
+    backgroundColor: _sharedUi.buoyColors.textMuted + "30",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    marginLeft: 4
+  },
+  todoBadgeText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.textMuted,
+    letterSpacing: 0.3
+  },
+  viewToggleContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  viewToggleLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.textSecondary,
+    letterSpacing: 0.5
+  },
+  viewToggleLabelActive: {
+    color: _sharedUi.buoyColors.primary
+  },
+  viewToggleLabelDisabled: {
+    color: _sharedUi.buoyColors.textMuted
+  },
+  viewToggleDescription: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    marginTop: 2
+  },
+  contentScroll: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: 12,
+    paddingTop: 0
+  },
+  noEventContainer: {
+    padding: 24,
+    alignItems: "center"
+  },
+  noEventText: {
+    fontSize: 13,
+    color: _sharedUi.buoyColors.textMuted
+  },
+  currentStateContainer: {
+    gap: 12
+  },
+  eventHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12
+  },
+  eventHeaderLeft: {
+    gap: 2
+  },
+  eventTitle: {
+    fontSize: 15,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.text
+  },
+  eventTime: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  eventBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 12,
+    gap: 6
+  },
+  eventBadgeDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  eventBadgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  section: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    overflow: "hidden"
+  },
+  sectionContent: {
+    padding: 12,
+    paddingTop: 8
+  },
+  causeContainer: {
+    marginBottom: 12
+  },
+  changedList: {
+    marginBottom: 12,
+    paddingLeft: 4
+  },
+  changedListTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    marginBottom: 6
+  },
+  changedItem: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    marginBottom: 3,
+    paddingLeft: 8
+  },
+  propsScrollView: {
+    maxHeight: 150
+  },
+  propsJson: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    color: _sharedUi.buoyColors.text,
+    backgroundColor: _sharedUi.buoyColors.input,
+    padding: 10,
+    borderRadius: 6
+  },
+  diffContainer: {
+    gap: 12
+  },
+  compareBar: {
+    flexDirection: "row",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 10
+  },
+  compareSide: {
+    flex: 1,
+    gap: 4
+  },
+  compareLabelRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  compareLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  },
+  compareActionBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  compareActionText: {
+    fontSize: 9,
+    fontWeight: "600"
+  },
+  compareMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  compareIndex: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text
+  },
+  compareTime: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  compareDivider: {
+    width: 30,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  compareArrow: {
+    fontSize: 16,
+    color: _sharedUi.buoyColors.textMuted
+  },
+  diffSummary: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 12
+  },
+  diffSummaryTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    marginBottom: 8
+  },
+  diffChanges: {
+    gap: 4
+  },
+  diffChangeItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  diffChangeIcon: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.warning,
+    fontFamily: "monospace"
+  },
+  diffChangeKey: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace"
+  },
+  diffNoChanges: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted,
+    fontStyle: "italic"
+  },
+  diffPlaceholder: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted,
+    fontStyle: "italic",
+    textAlign: "center",
+    padding: 16
+  },
+  // Diff mode tabs
+  diffModeTabs: {
+    flexDirection: "row",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 4,
+    gap: 4
+  },
+  diffModeTab: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    alignItems: "center"
+  },
+  diffModeTabActive: {
+    backgroundColor: _sharedUi.buoyColors.primary + "20"
+  },
+  diffModeTabDisabled: {
+    opacity: 0.4
+  },
+  diffModeTabText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    letterSpacing: 0.5
+  },
+  diffModeTabTextActive: {
+    color: _sharedUi.buoyColors.primary
+  },
+  diffModeTabTextDisabled: {
+    color: _sharedUi.buoyColors.textMuted
+  },
+  // Cause diff styles
+  causeDiffContainer: {
+    gap: 8,
+    marginBottom: 12
+  },
+  causeDiffRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  causeDiffLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    minWidth: 80
+  },
+  causeDiffValue: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    fontWeight: "500"
+  },
+  diffChangesTitle: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.textSecondary,
+    marginBottom: 6
+  },
+  // Tree diff container
+  treeDiffContainer: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    overflow: "hidden",
+    minHeight: 150
+  },
+  noDiffData: {
+    padding: 24,
+    alignItems: "center",
+    gap: 8
+  },
+  noDiffDataTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text
+  },
+  noDiffDataText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.textMuted,
+    textAlign: "center",
+    lineHeight: 18
+  },
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.warning + "30",
+    gap: 8
+  },
+  lockedBannerText: {
+    color: _sharedUi.buoyColors.warning,
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  lockedBannerSubtext: {
+    color: _sharedUi.buoyColors.textMuted,
+    fontSize: 12
+  }
+});
+var _default = exports.default = RenderHistoryViewer;