@buoy-gg/highlight-updates 7.0.76 → 7.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/highlight-updates/components/HighlightFilterView.js +1 -1
- package/lib/commonjs/highlight-updates/components/IsolatedRenderList.js +1 -1
- package/lib/commonjs/highlight-updates/components/RenderDetailView.js +1 -1
- package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js +1 -1
- package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js +1 -1
- package/lib/module/highlight-updates/components/HighlightFilterView.js +1 -1
- package/lib/module/highlight-updates/components/IsolatedRenderList.js +1 -1
- package/lib/module/highlight-updates/components/RenderDetailView.js +1 -1
- package/lib/module/highlight-updates/components/RenderHistoryViewer.js +1 -1
- package/lib/module/highlight-updates/components/RendersCopySettingsView.js +1 -1
- package/lib/web/index.mjs +7 -7
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import q,{useState as
|
|
1
|
+
"use strict";import q,{useState as j,useEffect as k,useRef as C,useCallback as m,memo as v,useMemo as y}from"react";import{View as z,Text as b,FlatList as D,StyleSheet as P}from"react-native";import{RenderTracker as r}from"../utils/RenderTracker";import{RenderListItem as N}from"./RenderListItem";import{Lock as V,night as u,useLimit as M,ToolEmptyState as U,resolveListEmptyState as _}from"@buoy-gg/shared-ui";import{jsx as s,jsxs as I}from"react/jsx-runtime";function H({searchText:t,filters:R,onSelectRender:g,onStatsChange:p,onRendersChange:i,isTracking:S,isPro:x=false}){const[o,h]=j(()=>r.getFilteredRenders(t));const w=C(null);k(()=>{const e=r.subscribe(()=>{const n=r.getFilteredRenders(t);h(n);p(r.getStats());i?.(n)});return e},[t,p,i]);k(()=>{const e=r.getFilteredRenders(t);h(e);i?.(e)},[t,R,i]);const L=M("highlightUpdates.components");const l=x?Infinity:L;const d=y(()=>{return o.slice(0,l)},[o,l]);const c=y(()=>{return Math.max(0,o.length-l)},[o.length,l]);const B=m(e=>e.id,[]);const E=m(({item:e,index:n})=>s(N,{render:e,onPress:()=>g(e,n,d)}),[g,d]);const F=m(()=>{if(c<=0)return null;return I(z,{testID:"buoy-highlight-locked",style:a.lockedBanner,children:[s(V,{size:14,color:u.color.warning}),I(b,{testID:"buoy-highlight-locked-text",style:a.lockedBannerText,children:[c," more ",c===1?"component":"components"," locked"]}),s(b,{style:a.lockedBannerSubtext,children:"Upgrade to Pro"})]})},[c]);if(o.length===0){const e=t.trim();const n=r.getStats().totalComponents;const f=e?r.getFilteredRenders("").length:0;const T=_({subject:"components",verb:"tracked",search:t,total:e?f:n,capturing:S,blocked:e&&f===0&&n>0?"The active filters hide everything tracked, so there is nothing to search.":void 0,waiting:{otto:"stare",title:"No renders tracked",message:"Component renders will appear here"},paused:{title:"No renders tracked",message:"Enable tracking to start capturing"}});return s(U,{...T,testID:"buoy-highlight-empty"})}return s(D,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-list",ref:w,data:d,renderItem:E,keyExtractor:B,contentContainerStyle:a.listContent,showsVerticalScrollIndicator:true,initialNumToRender:10,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:false,ListFooterComponent:F})}export const IsolatedRenderList=v(H);const a=P.create({listContent:{paddingTop:8},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:12,paddingHorizontal:16,marginTop:8,gap:8},lockedBannerText:{color:u.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:u.color.textTertiary,fontSize:12}});export default IsolatedRenderList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import ie,{useMemo as D,useState as V,useCallback as C}from"react";import{View as l,Text as n,TouchableOpacity as T,ScrollView as F,StyleSheet as j}from"react-native";import{CopyButton as M,formatRelativeTime as P,PlusIcon as $,MinusIcon as q,EventStepperFooter as U,Lock as K,night as o,useLimit as _,monoFont as b}from"@buoy-gg/shared-ui";import{TreeDiffViewer as G}from"@buoy-gg/shared-ui/dataViewer";import{CAUSE_CONFIG as Q,COMPONENT_CAUSE_CONFIG as J}from"./RenderCauseBadge";import{generateSingleComponentExport as X}from"../utils/rendersExportFormatter";import{jsx as i,jsxs as r}from"react/jsx-runtime";export function RenderDetailView({render:t,disableInternalFooter:h=false,selectedEventIndex:c,onEventIndexChange:d,onAddFilter:y,isPro:s=false}){const[m,g]=V(0);const u=c??m;const a=d??g;const p=D(()=>{if(!t.renderHistory||t.renderHistory.length===0){return[]}return[...t.renderHistory].sort((S,N)=>S.timestamp-N.timestamp)},[t.renderHistory]);const f=p.length;const I=p[u];const z=_("highlightUpdates.detailEvents");const x=s?Infinity:z;const v=D(()=>Math.max(0,f-x),[x,f]);const k=I?.cause||t.lastRenderCause;const O=C(()=>{if(u>0){a(u-1)}},[u,a]);const R=C(()=>{const S=Math.min(x-1,f-1);if(u<S){a(u+1)}},[u,f,a,x]);const W=D(()=>X(t),[t]);const A=t.componentName||t.displayName;const E=t.viewType;const L=t.lastRenderTime-t.firstRenderTime;const H=L>0?(t.renderCount/(L/1e3)).toFixed(1):t.renderCount.toString();const B=!h&&f>1;return r(l,{style:e.container,children:[r(l,{style:e.header,children:[r(l,{style:e.headerLeft,children:[i(n,{testID:"buoy-highlight-detail-name",style:e.componentName,numberOfLines:1,children:A}),i(l,{style:e.nativeTypeBadge,children:i(n,{testID:"buoy-highlight-detail-type",style:e.nativeTypeText,children:E})})]}),i(M,{value:W,size:14,testID:"buoy-highlight-detail-copy"})]}),r(F,{testID:"buoy-highlight-detail-scroll",style:e.scrollView,contentContainerStyle:[e.scrollContent,B&&{paddingBottom:100}],showsVerticalScrollIndicator:false,children:[k&&i(Y,{cause:k,renderNumber:I?.renderNumber}),i(Z,{render:t,rendersPerSec:H}),v>0&&r(l,{testID:"buoy-highlight-detail-locked",style:e.lockedBanner,children:[i(K,{size:14,color:o.color.warning}),r(n,{testID:"buoy-highlight-detail-locked-text",style:e.lockedBannerText,children:[v," ",v===1?"event":"events"," hidden"]}),i(n,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),y&&i(ee,{render:t,onAddFilter:y})]}),B&&i(U,{currentIndex:u,totalItems:f,onPrevious:O,onNext:R,itemLabel:"Render",subtitle:I?.timestamp?P(new Date(I.timestamp)):void 0,applySafeAreaInset:false,absolute:true})]})}function Y({cause:t,renderNumber:h}){const c=t.componentCause||t.type;const d=t.componentCause?J[t.componentCause]:Q[t.type];const y=t.hookChanges&&t.hookChanges.length>0;const s=t.changedKeys&&t.changedKeys.length>0;const m=()=>{if(t.type==="mount")return"First render";if(c==="parent")return"Triggered by";return"Changed:"};return r(l,{testID:"buoy-highlight-detail-cause",style:e.answerCard,children:[r(l,{style:e.causeBadgeRow,children:[i(n,{testID:"buoy-highlight-detail-cause-label",style:e.causeLabel,children:m()}),i(l,{style:[e.causeBadgeLarge,{backgroundColor:d.color+"20"}],children:i(n,{testID:"buoy-highlight-detail-cause-badge",style:[e.causeBadgeLargeText,{color:d.color}],children:d.label.toUpperCase()})})]}),y&&i(l,{style:e.hookChangesContainer,children:t.hookChanges.map((g,u)=>{const a=`${g.type}[${g.index}]`;const p={[a]:g.previousValue};const f={[a]:g.currentValue};return i(l,{style:e.hookDiffContainer,children:i(G,{oldValue:p,newValue:f,theme:"dark",showUnchanged:false})},u)})}),!y&&s&&i(l,{style:e.propsChangesContainer,children:t.changedKeys.filter(g=>!g.includes("(ref only)")).slice(0,5).map((g,u)=>i(l,{style:e.propChangeChip,children:i(n,{testID:`buoy-highlight-detail-changed-${u}`,style:e.propChangeText,children:g})},u))})]})}function Z({render:t,rendersPerSec:h}){const c=t.testID||t.nativeID||t.accessibilityLabel;const d=t.measurements;return r(l,{style:e.detailsSection,children:[c&&r(l,{testID:"buoy-highlight-detail-identifiers",style:e.detailsCard,children:[i(n,{style:e.detailsCardTitle,children:"Identifiers"}),t.testID&&i(w,{label:"testID",value:t.testID}),t.nativeID&&i(w,{label:"nativeID",value:t.nativeID}),t.accessibilityLabel&&i(w,{label:"a11y",value:t.accessibilityLabel})]}),r(l,{testID:"buoy-highlight-detail-stats",style:e.statsRow,children:[r(l,{testID:"buoy-highlight-detail-stat-renders",style:e.statItem,children:[i(n,{testID:"buoy-highlight-detail-stat-renders-value",style:[e.statValue,{color:t.color}],children:t.renderCount}),i(n,{style:e.statLabel,children:"renders"})]}),i(l,{style:e.statDivider}),r(l,{testID:"buoy-highlight-detail-stat-rate",style:e.statItem,children:[i(n,{testID:"buoy-highlight-detail-stat-rate-value",style:e.statValue,children:h}),i(n,{style:e.statLabel,children:"/sec"})]}),i(l,{style:e.statDivider}),r(l,{testID:"buoy-highlight-detail-stat-tag",style:e.statItem,children:[i(n,{testID:"buoy-highlight-detail-stat-tag-value",style:e.statValue,children:t.nativeTag}),i(n,{style:e.statLabel,children:"tag"})]})]}),d&&r(l,{testID:"buoy-highlight-detail-measure",style:e.measurementsRow,children:[r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"x"}),i(n,{testID:"buoy-highlight-detail-measure-x",style:e.measurementValue,children:Math.round(t.measurements.x)})]}),r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"y"}),i(n,{testID:"buoy-highlight-detail-measure-y",style:e.measurementValue,children:Math.round(t.measurements.y)})]}),r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"w"}),i(n,{testID:"buoy-highlight-detail-measure-w",style:e.measurementValue,children:Math.round(t.measurements.width)})]}),r(l,{style:e.measurementItem,children:[i(n,{style:e.measurementLabel,children:"h"}),i(n,{testID:"buoy-highlight-detail-measure-h",style:e.measurementValue,children:Math.round(t.measurements.height)})]})]})]})}function w({label:t,value:h}){const c=`buoy-highlight-detail-id-${t.toLowerCase()}`;return r(l,{testID:c,style:e.detailRow,children:[i(n,{style:e.detailLabel,children:t}),i(n,{testID:`${c}-value`,style:e.detailValue,numberOfLines:1,children:h})]})}function ee({render:t,onAddFilter:h}){const[c,d]=V(null);const y=D(()=>{const a=[];if(t.nativeID){a.push({type:"nativeID",value:t.nativeID,label:"nativeID"})}if(t.testID){a.push({type:"testID",value:t.testID,label:"testID"})}if(t.accessibilityLabel){a.push({type:"accessibilityLabel",value:t.accessibilityLabel,label:"a11y"})}if(t.componentName){a.push({type:"component",value:t.componentName,label:"component"})}a.push({type:"viewType",value:t.viewType,label:"viewType"});return a},[t]);const s=c!==null?y[c]:null;const m=C(a=>{d(p=>p===a?null:a)},[]);const g=C(()=>{if(s){h({type:s.type,value:s.value},"include");d(null)}},[s,h]);const u=C(()=>{if(s){h({type:s.type,value:s.value},"exclude");d(null)}},[s,h]);return r(l,{testID:"buoy-highlight-quick",style:e.quickActionsSection,children:[i(n,{style:e.quickActionsTitle,children:"Quick Filters"}),i(l,{style:e.filterOptionsList,children:y.map((a,p)=>i(te,{testID:`buoy-highlight-quick-${a.type.toLowerCase()}`,label:a.label,value:a.value,isSelected:c===p,onSelect:()=>m(p)},a.type))}),r(l,{style:e.filterActionButtons,children:[r(T,{testID:"buoy-highlight-quick-include",accessibilityRole:"button",accessibilityLabel:"Only show this",style:[e.filterActionButton,e.filterActionButtonInclude,!s&&e.filterActionButtonDisabled],onPress:g,disabled:!s,activeOpacity:.7,children:[i($,{size:14,color:s?o.color.accent:o.color.textTertiary}),i(n,{style:[e.filterActionButtonText,{color:s?o.color.accent:o.color.textTertiary}],children:"Only Show This"})]}),r(T,{testID:"buoy-highlight-quick-exclude",accessibilityRole:"button",accessibilityLabel:"Hide this",style:[e.filterActionButton,e.filterActionButtonExclude,!s&&e.filterActionButtonDisabled],onPress:u,disabled:!s,activeOpacity:.7,children:[i(q,{size:14,color:s?o.color.danger:o.color.textTertiary}),i(n,{style:[e.filterActionButtonText,{color:s?o.color.danger:o.color.textTertiary}],children:"Hide This"})]})]})]})}function te({testID:t,label:h,value:c,isSelected:d,onSelect:y}){return r(T,{testID:t,accessibilityRole:"button",accessibilityLabel:`${h}, ${c}`,style:[e.filterOptionCard,d&&e.filterOptionCardSelected],onPress:y,activeOpacity:.7,children:[i(n,{style:[e.filterOptionLabel,d&&e.filterOptionLabelSelected],children:h}),i(n,{testID:t?`${t}-value`:void 0,style:[e.filterOptionValue,d&&e.filterOptionValueSelected],numberOfLines:1,children:c})]})}const e=j.create({container:{flex:1,backgroundColor:"transparent"},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:o.color.text,flexShrink:1},nativeTypeBadge:{backgroundColor:o.color.bg,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:o.color.textTertiary,fontFamily:b},answerCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.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:o.color.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:o.color.bg,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:o.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:o.color.text,fontFamily:b},detailsSection:{gap:10},detailsCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:o.color.textSecondary,minWidth:55},detailValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:o.color.text,fontFamily:b},statLabel:{fontSize:10,color:o.color.textTertiary,marginTop:2},statDivider:{width:1,height:24,backgroundColor:o.color.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:o.color.text,fontFamily:b},quickActionsSection:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:o.color.accentBorderStrong,backgroundColor:o.color.accentSoft},filterOptionLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,minWidth:70},filterOptionLabelSelected:{color:o.color.accent},filterOptionValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},filterOptionValueSelected:{color:o.color.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:o.color.accentSoft,borderColor:o.color.accentBorderStrong},filterActionButtonExclude:{backgroundColor:o.color.dangerSoft,borderColor:o.color.danger+"40"},filterActionButtonDisabled:{backgroundColor:o.color.surfaceElevated,borderColor:o.color.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:o.color.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:o.color.textTertiary,fontSize:12}});export default RenderDetailView;
|
|
1
|
+
"use strict";import ie,{useMemo as D,useState as V,useCallback as C}from"react";import{View as l,Text as r,TouchableOpacity as T,ScrollView as F,StyleSheet as P}from"react-native";import{CopyButton as j,formatRelativeTime as M,PlusIcon as $,MinusIcon as q,EventStepperFooter as U,Lock as K,night as o,useLimit as _,monoFont as b}from"@buoy-gg/shared-ui";import{TreeDiffViewer as G}from"@buoy-gg/shared-ui/dataViewer";import{CAUSE_CONFIG as Q,COMPONENT_CAUSE_CONFIG as J}from"./RenderCauseBadge";import{generateSingleComponentExport as X}from"../utils/rendersExportFormatter";import{jsx as i,jsxs as n}from"react/jsx-runtime";export function RenderDetailView({render:t,disableInternalFooter:h=false,selectedEventIndex:c,onEventIndexChange:d,onAddFilter:y,isPro:s=false}){const[m,g]=V(0);const u=c??m;const a=d??g;const p=D(()=>{if(!t.renderHistory||t.renderHistory.length===0){return[]}return[...t.renderHistory].sort((S,N)=>S.timestamp-N.timestamp)},[t.renderHistory]);const f=p.length;const I=p[u];const z=_("highlightUpdates.detailEvents");const x=s?Infinity:z;const v=D(()=>Math.max(0,f-x),[x,f]);const k=I?.cause||t.lastRenderCause;const O=C(()=>{if(u>0){a(u-1)}},[u,a]);const R=C(()=>{const S=Math.min(x-1,f-1);if(u<S){a(u+1)}},[u,f,a,x]);const W=D(()=>X(t),[t]);const A=t.componentName||t.displayName;const E=t.viewType;const L=t.lastRenderTime-t.firstRenderTime;const H=L>0?(t.renderCount/(L/1e3)).toFixed(1):t.renderCount.toString();const B=!h&&f>1;return n(l,{style:e.container,children:[n(l,{style:e.header,children:[n(l,{style:e.headerLeft,children:[i(r,{testID:"buoy-highlight-detail-name",style:e.componentName,numberOfLines:1,children:A}),i(l,{style:e.nativeTypeBadge,children:i(r,{testID:"buoy-highlight-detail-type",style:e.nativeTypeText,children:E})})]}),i(j,{value:W,size:14,testID:"buoy-highlight-detail-copy"})]}),n(F,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-detail-scroll",style:e.scrollView,contentContainerStyle:[e.scrollContent,B&&{paddingBottom:100}],showsVerticalScrollIndicator:false,children:[k&&i(Y,{cause:k,renderNumber:I?.renderNumber}),i(Z,{render:t,rendersPerSec:H}),v>0&&n(l,{testID:"buoy-highlight-detail-locked",style:e.lockedBanner,children:[i(K,{size:14,color:o.color.warning}),n(r,{testID:"buoy-highlight-detail-locked-text",style:e.lockedBannerText,children:[v," ",v===1?"event":"events"," hidden"]}),i(r,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),y&&i(ee,{render:t,onAddFilter:y})]}),B&&i(U,{currentIndex:u,totalItems:f,onPrevious:O,onNext:R,itemLabel:"Render",subtitle:I?.timestamp?M(new Date(I.timestamp)):void 0,applySafeAreaInset:false,absolute:true})]})}function Y({cause:t,renderNumber:h}){const c=t.componentCause||t.type;const d=t.componentCause?J[t.componentCause]:Q[t.type];const y=t.hookChanges&&t.hookChanges.length>0;const s=t.changedKeys&&t.changedKeys.length>0;const m=()=>{if(t.type==="mount")return"First render";if(c==="parent")return"Triggered by";return"Changed:"};return n(l,{testID:"buoy-highlight-detail-cause",style:e.answerCard,children:[n(l,{style:e.causeBadgeRow,children:[i(r,{testID:"buoy-highlight-detail-cause-label",style:e.causeLabel,children:m()}),i(l,{style:[e.causeBadgeLarge,{backgroundColor:d.color+"20"}],children:i(r,{testID:"buoy-highlight-detail-cause-badge",style:[e.causeBadgeLargeText,{color:d.color}],children:d.label.toUpperCase()})})]}),y&&i(l,{style:e.hookChangesContainer,children:t.hookChanges.map((g,u)=>{const a=`${g.type}[${g.index}]`;const p={[a]:g.previousValue};const f={[a]:g.currentValue};return i(l,{style:e.hookDiffContainer,children:i(G,{oldValue:p,newValue:f,theme:"dark",showUnchanged:false})},u)})}),!y&&s&&i(l,{style:e.propsChangesContainer,children:t.changedKeys.filter(g=>!g.includes("(ref only)")).slice(0,5).map((g,u)=>i(l,{style:e.propChangeChip,children:i(r,{testID:`buoy-highlight-detail-changed-${u}`,style:e.propChangeText,children:g})},u))})]})}function Z({render:t,rendersPerSec:h}){const c=t.testID||t.nativeID||t.accessibilityLabel;const d=t.measurements;return n(l,{style:e.detailsSection,children:[c&&n(l,{testID:"buoy-highlight-detail-identifiers",style:e.detailsCard,children:[i(r,{style:e.detailsCardTitle,children:"Identifiers"}),t.testID&&i(w,{label:"testID",value:t.testID}),t.nativeID&&i(w,{label:"nativeID",value:t.nativeID}),t.accessibilityLabel&&i(w,{label:"a11y",value:t.accessibilityLabel})]}),n(l,{testID:"buoy-highlight-detail-stats",style:e.statsRow,children:[n(l,{testID:"buoy-highlight-detail-stat-renders",style:e.statItem,children:[i(r,{testID:"buoy-highlight-detail-stat-renders-value",style:[e.statValue,{color:t.color}],children:t.renderCount}),i(r,{style:e.statLabel,children:"renders"})]}),i(l,{style:e.statDivider}),n(l,{testID:"buoy-highlight-detail-stat-rate",style:e.statItem,children:[i(r,{testID:"buoy-highlight-detail-stat-rate-value",style:e.statValue,children:h}),i(r,{style:e.statLabel,children:"/sec"})]}),i(l,{style:e.statDivider}),n(l,{testID:"buoy-highlight-detail-stat-tag",style:e.statItem,children:[i(r,{testID:"buoy-highlight-detail-stat-tag-value",style:e.statValue,children:t.nativeTag}),i(r,{style:e.statLabel,children:"tag"})]})]}),d&&n(l,{testID:"buoy-highlight-detail-measure",style:e.measurementsRow,children:[n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"x"}),i(r,{testID:"buoy-highlight-detail-measure-x",style:e.measurementValue,children:Math.round(t.measurements.x)})]}),n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"y"}),i(r,{testID:"buoy-highlight-detail-measure-y",style:e.measurementValue,children:Math.round(t.measurements.y)})]}),n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"w"}),i(r,{testID:"buoy-highlight-detail-measure-w",style:e.measurementValue,children:Math.round(t.measurements.width)})]}),n(l,{style:e.measurementItem,children:[i(r,{style:e.measurementLabel,children:"h"}),i(r,{testID:"buoy-highlight-detail-measure-h",style:e.measurementValue,children:Math.round(t.measurements.height)})]})]})]})}function w({label:t,value:h}){const c=`buoy-highlight-detail-id-${t.toLowerCase()}`;return n(l,{testID:c,style:e.detailRow,children:[i(r,{style:e.detailLabel,children:t}),i(r,{testID:`${c}-value`,style:e.detailValue,numberOfLines:1,children:h})]})}function ee({render:t,onAddFilter:h}){const[c,d]=V(null);const y=D(()=>{const a=[];if(t.nativeID){a.push({type:"nativeID",value:t.nativeID,label:"nativeID"})}if(t.testID){a.push({type:"testID",value:t.testID,label:"testID"})}if(t.accessibilityLabel){a.push({type:"accessibilityLabel",value:t.accessibilityLabel,label:"a11y"})}if(t.componentName){a.push({type:"component",value:t.componentName,label:"component"})}a.push({type:"viewType",value:t.viewType,label:"viewType"});return a},[t]);const s=c!==null?y[c]:null;const m=C(a=>{d(p=>p===a?null:a)},[]);const g=C(()=>{if(s){h({type:s.type,value:s.value},"include");d(null)}},[s,h]);const u=C(()=>{if(s){h({type:s.type,value:s.value},"exclude");d(null)}},[s,h]);return n(l,{testID:"buoy-highlight-quick",style:e.quickActionsSection,children:[i(r,{style:e.quickActionsTitle,children:"Quick Filters"}),i(l,{style:e.filterOptionsList,children:y.map((a,p)=>i(te,{testID:`buoy-highlight-quick-${a.type.toLowerCase()}`,label:a.label,value:a.value,isSelected:c===p,onSelect:()=>m(p)},a.type))}),n(l,{style:e.filterActionButtons,children:[n(T,{testID:"buoy-highlight-quick-include",accessibilityRole:"button",accessibilityLabel:"Only show this",style:[e.filterActionButton,e.filterActionButtonInclude,!s&&e.filterActionButtonDisabled],onPress:g,disabled:!s,activeOpacity:.7,children:[i($,{size:14,color:s?o.color.accent:o.color.textTertiary}),i(r,{style:[e.filterActionButtonText,{color:s?o.color.accent:o.color.textTertiary}],children:"Only Show This"})]}),n(T,{testID:"buoy-highlight-quick-exclude",accessibilityRole:"button",accessibilityLabel:"Hide this",style:[e.filterActionButton,e.filterActionButtonExclude,!s&&e.filterActionButtonDisabled],onPress:u,disabled:!s,activeOpacity:.7,children:[i(q,{size:14,color:s?o.color.danger:o.color.textTertiary}),i(r,{style:[e.filterActionButtonText,{color:s?o.color.danger:o.color.textTertiary}],children:"Hide This"})]})]})]})}function te({testID:t,label:h,value:c,isSelected:d,onSelect:y}){return n(T,{testID:t,accessibilityRole:"button",accessibilityLabel:`${h}, ${c}`,style:[e.filterOptionCard,d&&e.filterOptionCardSelected],onPress:y,activeOpacity:.7,children:[i(r,{style:[e.filterOptionLabel,d&&e.filterOptionLabelSelected],children:h}),i(r,{testID:t?`${t}-value`:void 0,style:[e.filterOptionValue,d&&e.filterOptionValueSelected],numberOfLines:1,children:c})]})}const e=P.create({container:{flex:1,backgroundColor:"transparent"},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:o.color.text,flexShrink:1},nativeTypeBadge:{backgroundColor:o.color.bg,paddingVertical:3,paddingHorizontal:8,borderRadius:4},nativeTypeText:{fontSize:11,fontWeight:"600",color:o.color.textTertiary,fontFamily:b},answerCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.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:o.color.textSecondary,fontWeight:"500"},hookChangesContainer:{gap:6},hookDiffContainer:{backgroundColor:o.color.bg,borderRadius:6,overflow:"hidden"},propsChangesContainer:{flexDirection:"row",flexWrap:"wrap",gap:4},propChangeChip:{backgroundColor:o.color.bg,paddingVertical:2,paddingHorizontal:6,borderRadius:4},propChangeText:{fontSize:11,color:o.color.text,fontFamily:b},detailsSection:{gap:10},detailsCard:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:6},detailsCardTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:4},detailRow:{flexDirection:"row",alignItems:"center",gap:8},detailLabel:{fontSize:11,fontWeight:"600",color:o.color.textSecondary,minWidth:55},detailValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},statsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:10,paddingHorizontal:16},statItem:{flex:1,alignItems:"center"},statValue:{fontSize:16,fontWeight:"700",color:o.color.text,fontFamily:b},statLabel:{fontSize:10,color:o.color.textTertiary,marginTop:2},statDivider:{width:1,height:24,backgroundColor:o.color.border,marginHorizontal:12},measurementsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,paddingVertical:8,paddingHorizontal:12},measurementItem:{flexDirection:"row",alignItems:"baseline",gap:4},measurementLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,textTransform:"uppercase"},measurementValue:{fontSize:12,fontWeight:"600",color:o.color.text,fontFamily:b},quickActionsSection:{backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.border,padding:12,gap:10},quickActionsTitle:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,letterSpacing:.5,textTransform:"uppercase",marginBottom:2},filterOptionsList:{gap:6},filterOptionCard:{flexDirection:"row",alignItems:"center",backgroundColor:o.color.surfaceElevated,borderRadius:6,paddingVertical:10,paddingHorizontal:12,borderWidth:1,borderColor:"transparent",gap:10},filterOptionCardSelected:{borderColor:o.color.accentBorderStrong,backgroundColor:o.color.accentSoft},filterOptionLabel:{fontSize:10,fontWeight:"600",color:o.color.textTertiary,minWidth:70},filterOptionLabelSelected:{color:o.color.accent},filterOptionValue:{fontSize:12,color:o.color.text,fontFamily:b,flex:1},filterOptionValueSelected:{color:o.color.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:o.color.accentSoft,borderColor:o.color.accentBorderStrong},filterActionButtonExclude:{backgroundColor:o.color.dangerSoft,borderColor:o.color.danger+"40"},filterActionButtonDisabled:{backgroundColor:o.color.surfaceElevated,borderColor:o.color.border,opacity:.5},filterActionButtonText:{fontSize:11,fontWeight:"600"},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:o.color.surface,borderRadius:8,borderWidth:1,borderColor:o.color.warning+"40",paddingVertical:12,paddingHorizontal:16,gap:8},lockedBannerText:{color:o.color.warning,fontSize:13,fontWeight:"600"},lockedBannerSubtext:{color:o.color.textTertiary,fontSize:12}});export default RenderDetailView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import te,{useState as k,useCallback as w,useMemo as x}from"react";import{View as r,Text as l,TouchableOpacity as v,ScrollView as L,StyleSheet as _}from"react-native";import{Clock as J,GitBranch as G,Database as A,Lock as K,formatRelativeTime as W,SectionHeader as T,EventStepperFooter as P,buoyColors as V,night as t,useLimit as N,ToolEmptyState as Y,monoFont as y}from"@buoy-gg/shared-ui";import{TreeDiffViewer as F}from"@buoy-gg/shared-ui/dataViewer";import{RenderTracker as q}from"../utils/RenderTracker";import{EnhancedCauseDisplay as E,CAUSE_CONFIG as H}from"./RenderCauseBadge";import{jsx as o,jsxs as n,Fragment as Q}from"react/jsx-runtime";function B(i){const a=new Date(i);const g=a.getHours().toString().padStart(2,"0");const d=a.getMinutes().toString().padStart(2,"0");const f=a.getSeconds().toString().padStart(2,"0");const h=a.getMilliseconds().toString().padStart(3,"0");return`${g}:${d}:${f}.${h}`}export function RenderHistoryViewer({render:i,disableInternalFooter:a=false,selectedEventIndex:g,onEventIndexChange:d,isPro:f=false}){const[h,m]=k(0);const c=g??h;const s=d??m;const[p,I]=k("current");const u=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((D,$)=>D.timestamp-$.timestamp)},[i.renderHistory]);const z=N("highlightUpdates.historyEvents");const b=f?Infinity:z;const R=x(()=>u.slice(-b),[u,b]);const M=x(()=>Math.max(0,u.length-b),[u.length,b]);const S=R.length;const C=R[c];const U=c>0?R[c-1]:null;const O=w(()=>{if(c>0){s(c-1)}},[c,s]);const j=w(()=>{if(c<S-1){s(c+1)}},[c,S,s]);if(S===0){const D=q.getSettings().enableRenderHistory;return o(Y,{testID:"buoy-highlight-history-empty",otto:D?"stare":"paused",title:"No Render History",message:D?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return n(Q,{children:[n(r,{style:[e.container,{paddingBottom:!a&&S>1?80:0}],children:[M>0&&n(r,{testID:"buoy-highlight-history-locked",style:e.lockedBanner,children:[o(K,{size:14,color:t.color.warning}),n(l,{testID:"buoy-highlight-history-locked-text",style:e.lockedBannerText,children:[M," older ",M===1?"render":"renders"," locked"]}),o(l,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),n(r,{style:e.viewToggleContainer,children:[n(v,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[e.viewToggleCard,p==="current"&&e.viewToggleCardActive],onPress:()=>I("current"),activeOpacity:.8,children:[n(r,{style:e.viewToggleContent,children:[o(A,{size:16,color:p==="current"?t.color.accent:t.color.textSecondary}),o(l,{style:[e.viewToggleLabel,p==="current"&&e.viewToggleLabelActive],children:"CURRENT STATE"})]}),n(l,{style:[e.viewToggleDescription,p==="current"&&{color:t.color.text}],children:["View render #",C?.renderNumber??0," details"]})]}),n(r,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[e.viewToggleCard,e.viewToggleCardDisabled],children:[n(r,{style:e.viewToggleContent,children:[o(G,{size:16,color:t.color.textTertiary}),o(l,{style:[e.viewToggleLabel,e.viewToggleLabelDisabled],children:"DIFF VIEW"}),o(r,{style:e.todoBadge,children:o(l,{style:e.todoBadgeText,children:"TODO"})})]}),o(l,{style:[e.viewToggleDescription,{color:t.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),o(L,{testID:"buoy-highlight-history-scroll",style:e.contentScroll,contentContainerStyle:e.contentContainer,showsVerticalScrollIndicator:false,children:p==="current"?o(X,{event:C,render:i}):o(Z,{previousEvent:U,currentEvent:C,render:i})})]}),!a&&o(P,{currentIndex:c,totalItems:S,onPrevious:O,onNext:j,itemLabel:"Render",subtitle:W(new Date(C?.timestamp??Date.now()))})]})}function X({event:i,render:a}){if(!i){return o(r,{testID:"buoy-highlight-history-no-event",style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"No event selected"})})}const g=H[i.cause.type];return n(r,{style:e.currentStateContainer,children:[n(r,{style:e.eventHeader,children:[n(r,{style:e.eventHeaderLeft,children:[n(l,{testID:"buoy-highlight-history-event-title",style:e.eventTitle,children:["Render #",i.renderNumber]}),o(l,{testID:"buoy-highlight-history-event-time",style:e.eventTime,children:B(i.timestamp)})]}),n(r,{style:[e.eventBadge,{backgroundColor:a.color+"30"}],children:[o(r,{style:[e.eventBadgeDot,{backgroundColor:a.color}]}),o(l,{testID:"buoy-highlight-history-event-cause",style:[e.eventBadgeText,{color:a.color}],children:i.cause.type.toUpperCase()})]})]}),n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:J,color:g.color,size:12}),o(T.Title,{children:"WHY DID THIS RENDER?"})]}),o(r,{style:e.sectionContent,children:o(E,{cause:i.cause,nativeType:a.viewType})})]}),i.capturedProps&&Object.keys(i.capturedProps).length>0&&n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:A,color:t.color.accent,size:12}),o(T.Title,{children:"CAPTURED PROPS"})]}),o(r,{style:e.sectionContent,children:o(L,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.propsScrollView,children:o(l,{testID:"buoy-highlight-history-props",style:e.propsJson,children:JSON.stringify(i.capturedProps,null,2)})})})]})]})}function Z({previousEvent:i,currentEvent:a,render:g}){const[d,f]=k("props");if(!i||!a){return o(r,{style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"Select an event with a previous event to compare"})})}const h=H[i.cause.type];const m=H[a.cause.type];const c=i.capturedProps&&a.capturedProps;const s=i.capturedState&&a.capturedState;return n(r,{style:e.diffContainer,children:[n(r,{style:e.compareBar,children:[n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.warning}],children:"PREV"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${h.color}20`}],children:o(l,{style:[e.compareActionText,{color:h.color}],children:i.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",i.renderNumber]}),o(l,{style:e.compareTime,children:B(i.timestamp)})]})]}),o(r,{style:e.compareDivider,children:o(l,{style:e.compareArrow,children:"\u2192"})}),n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.success}],children:"CUR"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${m.color}20`}],children:o(l,{style:[e.compareActionText,{color:m.color}],children:a.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",a.renderNumber]}),o(l,{style:e.compareTime,children:B(a.timestamp)})]})]})]}),n(r,{style:e.diffModeTabs,children:[o(v,{style:[e.diffModeTab,d==="cause"&&e.diffModeTabActive],onPress:()=>f("cause"),activeOpacity:.7,children:o(l,{style:[e.diffModeTabText,d==="cause"&&e.diffModeTabTextActive],children:"CAUSE"})}),o(v,{style:[e.diffModeTab,d==="props"&&e.diffModeTabActive,!c&&e.diffModeTabDisabled],onPress:()=>c&&f("props"),activeOpacity:c?.7:1,children:o(l,{style:[e.diffModeTabText,d==="props"&&e.diffModeTabTextActive,!c&&e.diffModeTabTextDisabled],children:"PROPS"})}),o(v,{style:[e.diffModeTab,d==="state"&&e.diffModeTabActive,!s&&e.diffModeTabDisabled],onPress:()=>s&&f("state"),activeOpacity:s?.7:1,children:o(l,{style:[e.diffModeTabText,d==="state"&&e.diffModeTabTextActive,!s&&e.diffModeTabTextDisabled],children:"STATE"})})]}),d==="cause"&&o(r,{style:e.diffSummary,children:o(E,{cause:a.cause,nativeType:g.viewType})}),d==="props"&&o(r,{style:e.treeDiffContainer,children:c?o(F,{oldValue:i.capturedProps,newValue:a.capturedProps,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"Props Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),d==="state"&&o(r,{style:e.treeDiffContainer,children:s?o(F,{oldValue:i.capturedState,newValue:a.capturedState,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"State Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}export function RenderHistoryFooter({render:i,selectedEventIndex:a=0,onEventIndexChange:g=()=>{},isPro:d=false}){const f=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((z,b)=>z.timestamp-b.timestamp)},[i.renderHistory]);const h=N("highlightUpdates.historyEvents");const m=d?Infinity:h;const c=x(()=>f.slice(-m),[f,m]);const s=c.length;const p=c[a];const I=w(()=>{g(Math.max(0,a-1))},[a,g]);const u=w(()=>{g(Math.min(s-1,a+1))},[a,s,g]);if(s<=1){return null}return o(P,{currentIndex:a,totalItems:s,onPrevious:I,onNext:u,itemLabel:"Render",subtitle:p?W(new Date(p.timestamp)):void 0})}const e=_.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:t.color.text},emptyText:{fontSize:13,color:t.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:t.color.accentBorderStrong,backgroundColor:t.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:t.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:t.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:t.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:t.color.accent},viewToggleLabelDisabled:{color:t.color.textTertiary},viewToggleDescription:{fontSize:11,color:t.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:t.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:t.color.text},eventTime:{fontSize:11,color:t.color.textTertiary,fontFamily:y},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:y},section:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:t.color.text,fontFamily:y,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:y,color:t.color.text,backgroundColor:t.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.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:t.color.text},compareTime:{fontSize:10,color:t.color.textTertiary,fontFamily:y},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:t.color.textTertiary},diffSummary:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:t.color.warning,fontFamily:y},diffChangeKey:{fontSize:12,color:t.color.text,fontFamily:y},diffNoChanges:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:t.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:t.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:t.color.accent},diffModeTabTextDisabled:{color:t.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:t.color.text,fontFamily:y,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:t.color.text},noDiffDataText:{fontSize:12,color:t.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:t.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:t.color.warning+"30",gap:8},lockedBannerText:{color:t.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:t.color.textTertiary,fontSize:12}});export default RenderHistoryViewer;
|
|
1
|
+
"use strict";import te,{useState as M,useCallback as w,useMemo as x}from"react";import{View as r,Text as l,TouchableOpacity as v,ScrollView as L,StyleSheet as _}from"react-native";import{Clock as J,GitBranch as G,Database as A,Lock as K,formatRelativeTime as W,SectionHeader as T,EventStepperFooter as P,buoyColors as V,night as t,useLimit as N,ToolEmptyState as Y,monoFont as y}from"@buoy-gg/shared-ui";import{TreeDiffViewer as F}from"@buoy-gg/shared-ui/dataViewer";import{RenderTracker as q}from"../utils/RenderTracker";import{EnhancedCauseDisplay as E,CAUSE_CONFIG as H}from"./RenderCauseBadge";import{jsx as o,jsxs as n,Fragment as Q}from"react/jsx-runtime";function B(i){const a=new Date(i);const g=a.getHours().toString().padStart(2,"0");const d=a.getMinutes().toString().padStart(2,"0");const f=a.getSeconds().toString().padStart(2,"0");const h=a.getMilliseconds().toString().padStart(3,"0");return`${g}:${d}:${f}.${h}`}export function RenderHistoryViewer({render:i,disableInternalFooter:a=false,selectedEventIndex:g,onEventIndexChange:d,isPro:f=false}){const[h,m]=M(0);const c=g??h;const s=d??m;const[p,I]=M("current");const u=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((D,$)=>D.timestamp-$.timestamp)},[i.renderHistory]);const z=N("highlightUpdates.historyEvents");const b=f?Infinity:z;const R=x(()=>u.slice(-b),[u,b]);const k=x(()=>Math.max(0,u.length-b),[u.length,b]);const S=R.length;const C=R[c];const U=c>0?R[c-1]:null;const O=w(()=>{if(c>0){s(c-1)}},[c,s]);const j=w(()=>{if(c<S-1){s(c+1)}},[c,S,s]);if(S===0){const D=q.getSettings().enableRenderHistory;return o(Y,{testID:"buoy-highlight-history-empty",otto:D?"stare":"paused",title:"No Render History",message:D?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return n(Q,{children:[n(r,{style:[e.container,{paddingBottom:!a&&S>1?80:0}],children:[k>0&&n(r,{testID:"buoy-highlight-history-locked",style:e.lockedBanner,children:[o(K,{size:14,color:t.color.warning}),n(l,{testID:"buoy-highlight-history-locked-text",style:e.lockedBannerText,children:[k," older ",k===1?"render":"renders"," locked"]}),o(l,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),n(r,{style:e.viewToggleContainer,children:[n(v,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[e.viewToggleCard,p==="current"&&e.viewToggleCardActive],onPress:()=>I("current"),activeOpacity:.8,children:[n(r,{style:e.viewToggleContent,children:[o(A,{size:16,color:p==="current"?t.color.accent:t.color.textSecondary}),o(l,{style:[e.viewToggleLabel,p==="current"&&e.viewToggleLabelActive],children:"CURRENT STATE"})]}),n(l,{style:[e.viewToggleDescription,p==="current"&&{color:t.color.text}],children:["View render #",C?.renderNumber??0," details"]})]}),n(r,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[e.viewToggleCard,e.viewToggleCardDisabled],children:[n(r,{style:e.viewToggleContent,children:[o(G,{size:16,color:t.color.textTertiary}),o(l,{style:[e.viewToggleLabel,e.viewToggleLabelDisabled],children:"DIFF VIEW"}),o(r,{style:e.todoBadge,children:o(l,{style:e.todoBadgeText,children:"TODO"})})]}),o(l,{style:[e.viewToggleDescription,{color:t.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),o(L,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-history-scroll",style:e.contentScroll,contentContainerStyle:e.contentContainer,showsVerticalScrollIndicator:false,children:p==="current"?o(X,{event:C,render:i}):o(Z,{previousEvent:U,currentEvent:C,render:i})})]}),!a&&o(P,{currentIndex:c,totalItems:S,onPrevious:O,onNext:j,itemLabel:"Render",subtitle:W(new Date(C?.timestamp??Date.now()))})]})}function X({event:i,render:a}){if(!i){return o(r,{testID:"buoy-highlight-history-no-event",style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"No event selected"})})}const g=H[i.cause.type];return n(r,{style:e.currentStateContainer,children:[n(r,{style:e.eventHeader,children:[n(r,{style:e.eventHeaderLeft,children:[n(l,{testID:"buoy-highlight-history-event-title",style:e.eventTitle,children:["Render #",i.renderNumber]}),o(l,{testID:"buoy-highlight-history-event-time",style:e.eventTime,children:B(i.timestamp)})]}),n(r,{style:[e.eventBadge,{backgroundColor:a.color+"30"}],children:[o(r,{style:[e.eventBadgeDot,{backgroundColor:a.color}]}),o(l,{testID:"buoy-highlight-history-event-cause",style:[e.eventBadgeText,{color:a.color}],children:i.cause.type.toUpperCase()})]})]}),n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:J,color:g.color,size:12}),o(T.Title,{children:"WHY DID THIS RENDER?"})]}),o(r,{style:e.sectionContent,children:o(E,{cause:i.cause,nativeType:a.viewType})})]}),i.capturedProps&&Object.keys(i.capturedProps).length>0&&n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:A,color:t.color.accent,size:12}),o(T.Title,{children:"CAPTURED PROPS"})]}),o(r,{style:e.sectionContent,children:o(L,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.propsScrollView,children:o(l,{testID:"buoy-highlight-history-props",style:e.propsJson,children:JSON.stringify(i.capturedProps,null,2)})})})]})]})}function Z({previousEvent:i,currentEvent:a,render:g}){const[d,f]=M("props");if(!i||!a){return o(r,{style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"Select an event with a previous event to compare"})})}const h=H[i.cause.type];const m=H[a.cause.type];const c=i.capturedProps&&a.capturedProps;const s=i.capturedState&&a.capturedState;return n(r,{style:e.diffContainer,children:[n(r,{style:e.compareBar,children:[n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.warning}],children:"PREV"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${h.color}20`}],children:o(l,{style:[e.compareActionText,{color:h.color}],children:i.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",i.renderNumber]}),o(l,{style:e.compareTime,children:B(i.timestamp)})]})]}),o(r,{style:e.compareDivider,children:o(l,{style:e.compareArrow,children:"\u2192"})}),n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.success}],children:"CUR"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${m.color}20`}],children:o(l,{style:[e.compareActionText,{color:m.color}],children:a.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",a.renderNumber]}),o(l,{style:e.compareTime,children:B(a.timestamp)})]})]})]}),n(r,{style:e.diffModeTabs,children:[o(v,{style:[e.diffModeTab,d==="cause"&&e.diffModeTabActive],onPress:()=>f("cause"),activeOpacity:.7,children:o(l,{style:[e.diffModeTabText,d==="cause"&&e.diffModeTabTextActive],children:"CAUSE"})}),o(v,{style:[e.diffModeTab,d==="props"&&e.diffModeTabActive,!c&&e.diffModeTabDisabled],onPress:()=>c&&f("props"),activeOpacity:c?.7:1,children:o(l,{style:[e.diffModeTabText,d==="props"&&e.diffModeTabTextActive,!c&&e.diffModeTabTextDisabled],children:"PROPS"})}),o(v,{style:[e.diffModeTab,d==="state"&&e.diffModeTabActive,!s&&e.diffModeTabDisabled],onPress:()=>s&&f("state"),activeOpacity:s?.7:1,children:o(l,{style:[e.diffModeTabText,d==="state"&&e.diffModeTabTextActive,!s&&e.diffModeTabTextDisabled],children:"STATE"})})]}),d==="cause"&&o(r,{style:e.diffSummary,children:o(E,{cause:a.cause,nativeType:g.viewType})}),d==="props"&&o(r,{style:e.treeDiffContainer,children:c?o(F,{oldValue:i.capturedProps,newValue:a.capturedProps,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"Props Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),d==="state"&&o(r,{style:e.treeDiffContainer,children:s?o(F,{oldValue:i.capturedState,newValue:a.capturedState,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"State Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}export function RenderHistoryFooter({render:i,selectedEventIndex:a=0,onEventIndexChange:g=()=>{},isPro:d=false}){const f=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((z,b)=>z.timestamp-b.timestamp)},[i.renderHistory]);const h=N("highlightUpdates.historyEvents");const m=d?Infinity:h;const c=x(()=>f.slice(-m),[f,m]);const s=c.length;const p=c[a];const I=w(()=>{g(Math.max(0,a-1))},[a,g]);const u=w(()=>{g(Math.min(s-1,a+1))},[a,s,g]);if(s<=1){return null}return o(P,{currentIndex:a,totalItems:s,onPrevious:I,onNext:u,itemLabel:"Render",subtitle:p?W(new Date(p.timestamp)):void 0})}const e=_.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:t.color.text},emptyText:{fontSize:13,color:t.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:t.color.accentBorderStrong,backgroundColor:t.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:t.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:t.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:t.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:t.color.accent},viewToggleLabelDisabled:{color:t.color.textTertiary},viewToggleDescription:{fontSize:11,color:t.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:t.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:t.color.text},eventTime:{fontSize:11,color:t.color.textTertiary,fontFamily:y},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:y},section:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:t.color.text,fontFamily:y,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:y,color:t.color.text,backgroundColor:t.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.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:t.color.text},compareTime:{fontSize:10,color:t.color.textTertiary,fontFamily:y},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:t.color.textTertiary},diffSummary:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:t.color.warning,fontFamily:y},diffChangeKey:{fontSize:12,color:t.color.text,fontFamily:y},diffNoChanges:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:t.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:t.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:t.color.accent},diffModeTabTextDisabled:{color:t.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:t.color.text,fontFamily:y,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:t.color.text},noDiffDataText:{fontSize:12,color:t.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:t.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:t.color.warning+"30",gap:8},lockedBannerText:{color:t.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:t.color.textTertiary,fontSize:12}});export default RenderHistoryViewer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback as
|
|
1
|
+
"use strict";import{useCallback as d,useEffect as V,useMemo as y,useState as N}from"react";import{Text as E,StyleSheet as D,ScrollView as _}from"react-native";import{DynamicFilterView as O,macOSColors as g,night as f,FileText as k,FileCode as P,Zap as B,Settings as $,Eye as M,Layers as z,ToolbarCopyButton as G,ExportPreview as U,monoFont as W}from"@buoy-gg/shared-ui";import{DEFAULT_COPY_SETTINGS as Z,COPY_PRESETS as J,PRESET_METADATA as r,detectActivePreset as K}from"../types/copySettings";import{generateExport as Y,estimateExportSize as q,getExportSummary as F}from"../utils/rendersExportFormatter";import{loadCopySettings as Q,saveCopySettings as X}from"../utils/copySettingsStorage";import{jsx as u,Fragment as ee,jsxs as te}from"react/jsx-runtime";const ie=50*1024;const oe=200*1024;const re=[{value:"mount",label:"Mount"},{value:"props",label:"Props"},{value:"hooks",label:"Hooks"},{value:"state",label:"State"},{value:"parent",label:"Parent"},{value:"context",label:"Context"},{value:"unknown",label:"Unknown"}];function ae(i){if(i<1024)return`${i} B`;if(i<1024*1024)return`${(i/1024).toFixed(1)} KB`;return`${(i/(1024*1024)).toFixed(1)} MB`}function se(){const i=Date.now();return[{id:"1",nativeTag:1,viewType:"RCTView",displayName:"View",componentName:"PokemonListItem",renderCount:30,firstRenderTime:i-5e3,lastRenderTime:i,color:"#10B981",lastRenderCause:{type:"parent",timestamp:i,componentCause:"parent"}},{id:"2",nativeTag:2,viewType:"RCTView",displayName:"View",componentName:"CartHeader",renderCount:12,firstRenderTime:i-4e3,lastRenderTime:i,color:"#3B82F6",lastRenderCause:{type:"hooks",timestamp:i,componentCause:"state",hookChanges:[{type:"useState",index:2,previousValue:4,currentValue:5}]}},{id:"3",nativeTag:3,viewType:"RCTView",displayName:"View",componentName:"SearchBar",renderCount:8,firstRenderTime:i-3e3,lastRenderTime:i,color:"#F59E0B",lastRenderCause:{type:"props",timestamp:i,componentCause:"props",changedKeys:["query","onChange"]}}]}export function RendersCopySettingsView({renders:i}){const[e,h]=N(Z);const[C,L]=N(false);V(()=>{let t=true;Q().then(o=>{if(t&&o)h(o)});return()=>{t=false}},[]);const a=d(t=>{h(t);X(t)},[]);const p=i.length>0;const n=p?i:se();const l=y(()=>K(e),[e]);const m=y(()=>q(n,e),[n,e]);const w=y(()=>{if(m>=oe)return"danger";if(m>=ie)return"warning";return"none"},[m]);const v=d(()=>Y(n,e),[n,e]);const S=d(t=>{const o=J[t];if(!o)return;a({...o,filterCauses:[...o.filterCauses]})},[a]);const R=d((t,o)=>{const[s,x]=t.split("::");if(s==="preset"){S(x);return}if(s==="format"){a({...e,format:o});return}if(s==="sort"){a({...e,sortBy:o});return}if(s==="topN"){a({...e,topN:o});return}if(s==="minRenders"){a({...e,minRenders:o});return}if(s==="cause"){const c=o;const H=e.filterCauses.includes(c);a({...e,filterCauses:H?e.filterCauses.filter(I=>I!==c):[...e.filterCauses,c]});return}if(s==="signal"){const c=x;a({...e,[c]:!e[c]});return}},[e,a,S]);const A=d(()=>{const{totalComponents:t,totalRenders:o}=F(n);return u(U,{expanded:C,onExpandedChange:L,summary:`${t} component${t!==1?"s":""} \xB7 ${o} renders \xB7 ~${ae(m)}${!p?" (mock data)":""}`,warningLevel:w,warningText:{warning:"Large payload \u2014 preview may be slow",danger:"Very large payload \u2014 try a smaller topN or turn off history"},testIDs:{expand:"buoy-highlight-copy-preview-show",collapse:"buoy-highlight-copy-preview-hide",summary:"buoy-highlight-copy-preview-summary",warning:"buoy-highlight-copy-size-warning"},renderBody:()=>{const s=v();return u(_,{keyboardShouldPersistTaps:"handled",testID:"buoy-highlight-copy-preview-scroll",style:b.previewScroll,nestedScrollEnabled:true,children:u(E,{testID:"buoy-highlight-copy-preview-text",style:b.previewText,selectable:true,children:s})})}})},[C,n,m,w,p,v]);const T=d(()=>{const{totalComponents:t}=F(n);const o=p?`${t} components`:"Mock data (no renders captured)";return te(ee,{children:[u(E,{testID:"buoy-highlight-copy-status",style:b.statusLabel,children:o}),u(G,{value:v})]})},[p,n,v]);const j=y(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::llm",label:r.llm.label,icon:B,color:r.llm.color,value:"llm",isActive:l==="llm",description:r.llm.description},{id:"preset::table",label:r.table.label,icon:k,color:r.table.color,value:"table",isActive:l==="table",description:r.table.description},{id:"preset::json",label:r.json.label,icon:P,color:r.json.color,value:"json",isActive:l==="json",description:r.json.description},{id:"preset::full",label:r.full.label,icon:z,color:r.full.color,value:"full",isActive:l==="full",description:r.full.description},{id:"preset::custom",label:"Custom",icon:$,color:f.color.textSecondary,value:"custom",isActive:l===null,description:"User-configured"}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::summary",label:"Summary",icon:B,color:g.semantic.success,value:"summary",isActive:e.format==="summary",description:"Compact, LLM-ready"},{id:"format::markdown-table",label:"Table",icon:k,color:g.semantic.info,value:"markdown-table",isActive:e.format==="markdown-table",description:"Markdown table"},{id:"format::json",label:"JSON",icon:P,color:g.semantic.warning,value:"json",isActive:e.format==="json",description:"Structured data"}]},{id:"sort",title:"Sort By",type:"custom",data:[{id:"sort::renderCount",label:"Count",value:"renderCount",isActive:e.sortBy==="renderCount",description:"Total renders"},{id:"sort::rate",label:"Rate",value:"rate",isActive:e.sortBy==="rate",description:"Renders / sec"},{id:"sort::name",label:"Name",value:"name",isActive:e.sortBy==="name",description:"Alphabetical"}]},{id:"topN",title:"Top N",type:"custom",data:[{id:"topN::10",label:"10",value:10,isActive:e.topN===10},{id:"topN::25",label:"25",value:25,isActive:e.topN===25},{id:"topN::50",label:"50",value:50,isActive:e.topN===50},{id:"topN::100",label:"100",value:100,isActive:e.topN===100},{id:"topN::-1",label:"All",value:-1,isActive:e.topN===-1}]},{id:"minRenders",title:"Min Renders",type:"custom",data:[{id:"minRenders::1",label:"1",value:1,isActive:e.minRenders===1},{id:"minRenders::2",label:"2",value:2,isActive:e.minRenders===2},{id:"minRenders::3",label:"3",value:3,isActive:e.minRenders===3},{id:"minRenders::5",label:"5",value:5,isActive:e.minRenders===5},{id:"minRenders::10",label:"10",value:10,isActive:e.minRenders===10}]},{id:"causes",title:"Filter Causes",type:"custom",description:e.filterCauses.length===0?"All causes shown":"Only the selected causes shown",data:re.map(t=>({id:`cause::${t.value}`,label:t.label,value:t.value,isActive:e.filterCauses.includes(t.value)}))},{id:"signal",title:"Signal Extraction",type:"custom",data:[{id:"signal::groupByName",label:"Group by name",value:"groupByName",isActive:e.groupByName,description:"Collapse list items"},{id:"signal::aggregateCauses",label:"Aggregate causes",value:"aggregateCauses",isActive:e.aggregateCauses,description:"Hook x N"},{id:"signal::includeHistory",label:"Include history",value:"includeHistory",isActive:e.includeHistory,description:"JSON only \u2014 large"}]}],previewSection:{enabled:true,title:"PREVIEW",icon:M,content:A,headerActions:T},onFilterChange:R}),[e,l,R,A,T]);return u(O,{...j})}const b=D.create({previewScroll:{maxHeight:360},previewText:{fontFamily:W,fontSize:11,color:f.color.text,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:f.color.textTertiary,marginRight:8}});
|