@buoy-gg/highlight-updates 7.0.41 → 7.0.43

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

@@ -1,840 +1 @@
-"use strict";
-
-/**
- * RenderDetailView
- *
- * Minimal, glanceable view for render details.
- * Design principle: Dev should understand WHY in 3 seconds.
- *
- * Layout:
- * - Header: Component name + native type
- * - Answer Card: Cause badges + hook change (THE answer)
- * - History Row: Compact inline navigation
- */
-
-import React, { useMemo, useState, useCallback } from "react";
-import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, night, useLimit, monoFont } from "@buoy-gg/shared-ui";
-import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { CAUSE_CONFIG, COMPONENT_CAUSE_CONFIG } from "./RenderCauseBadge";
-import { generateSingleComponentExport } from "../utils/rendersExportFormatter";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Free tier limit for render history events
-export function RenderDetailView({
-  render,
-  disableInternalFooter = false,
-  selectedEventIndex: externalIndex,
-  onEventIndexChange: externalOnChange,
-  onAddFilter,
-  isPro = false
-}) {
-  // Internal state for event index when not controlled externally
-  const [internalIndex, setInternalIndex] = useState(0);
-
-  // Use external or internal state
-  const selectedEventIndex = externalIndex ?? internalIndex;
-  const onEventIndexChange = externalOnChange ?? setInternalIndex;
-
-  // Get events sorted by timestamp (oldest first)
-  const events = useMemo(() => {
-    if (!render.renderHistory || render.renderHistory.length === 0) {
-      return [];
-    }
-    return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
-  }, [render.renderHistory]);
-  const totalEvents = events.length;
-  const currentEvent = events[selectedEventIndex];
-
-  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
-  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
-  // agree — this only preserves the prop contract for cross-package callers.
-  const tierLimit = useLimit("highlightUpdates.detailEvents");
-  const eventLimit = isPro ? Infinity : tierLimit;
-  const hiddenEventCount = useMemo(() => Math.max(0, totalEvents - eventLimit), [eventLimit, totalEvents]);
-
-  // Use current event's cause if available, otherwise fall back to lastRenderCause
-  const displayCause = currentEvent?.cause || render.lastRenderCause;
-
-  // Navigation handlers
-  const goToPrevious = useCallback(() => {
-    if (selectedEventIndex > 0) {
-      onEventIndexChange(selectedEventIndex - 1);
-    }
-  }, [selectedEventIndex, onEventIndexChange]);
-  const goToNext = useCallback(() => {
-    // Infinity - 1 is Infinity, so an unlimited tier just gets totalEvents - 1.
-    const maxIndex = Math.min(eventLimit - 1, totalEvents - 1);
-    if (selectedEventIndex < maxIndex) {
-      onEventIndexChange(selectedEventIndex + 1);
-    }
-  }, [selectedEventIndex, totalEvents, onEventIndexChange, eventLimit]);
-
-  // Memoize copy data
-  const copyData = useMemo(() => generateSingleComponentExport(render), [render]);
-
-  // Get component name (prefer componentName, fall back to displayName)
-  const componentName = render.componentName || render.displayName;
-  const nativeType = render.viewType;
-
-  // Calculate render stats
-  const renderDuration = render.lastRenderTime - render.firstRenderTime;
-  const rendersPerSec = renderDuration > 0 ? (render.renderCount / (renderDuration / 1000)).toFixed(1) : render.renderCount.toString();
-
-  // Determine if we should show footer (either history or filters)
-  const showHistoryFooter = !disableInternalFooter && totalEvents > 1;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.header,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.headerLeft,
-        children: [/*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-name",
-          style: styles.componentName,
-          numberOfLines: 1,
-          children: componentName
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.nativeTypeBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            testID: "buoy-highlight-detail-type",
-            style: styles.nativeTypeText,
-            children: nativeType
-          })
-        })]
-      }), /*#__PURE__*/_jsx(CopyButton, {
-        value: copyData,
-        size: 14,
-        testID: "buoy-highlight-detail-copy"
-      })]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      testID: "buoy-highlight-detail-scroll",
-      style: styles.scrollView,
-      contentContainerStyle: [styles.scrollContent, showHistoryFooter && {
-        paddingBottom: 100
-      }],
-      showsVerticalScrollIndicator: false,
-      children: [displayCause && /*#__PURE__*/_jsx(AnswerCard, {
-        cause: displayCause,
-        renderNumber: currentEvent?.renderNumber
-      }), /*#__PURE__*/_jsx(DetailsSection, {
-        render: render,
-        rendersPerSec: rendersPerSec
-      }), hiddenEventCount > 0 && /*#__PURE__*/_jsxs(View, {
-        testID: "buoy-highlight-detail-locked",
-        style: styles.lockedBanner,
-        children: [/*#__PURE__*/_jsx(Lock, {
-          size: 14,
-          color: night.color.warning
-        }), /*#__PURE__*/_jsxs(Text, {
-          testID: "buoy-highlight-detail-locked-text",
-          style: styles.lockedBannerText,
-          children: [hiddenEventCount, " ", hiddenEventCount === 1 ? 'event' : 'events', " hidden"]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.lockedBannerSubtext,
-          children: "Upgrade to Pro"
-        })]
-      }), onAddFilter && /*#__PURE__*/_jsx(QuickActionsSection, {
-        render: render,
-        onAddFilter: onAddFilter
-      })]
-    }), showHistoryFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
-      currentIndex: selectedEventIndex,
-      totalItems: totalEvents,
-      onPrevious: goToPrevious,
-      onNext: goToNext,
-      itemLabel: "Render",
-      subtitle: currentEvent?.timestamp ? formatRelativeTime(new Date(currentEvent.timestamp)) : undefined,
-      applySafeAreaInset: false,
-      absolute: true
-    })]
-  });
-}
-
-/**
- * AnswerCard - The hero section showing WHY the component rendered
- * Design: Single badge + what changed below it
- */
-function AnswerCard({
-  cause,
-  renderNumber
-}) {
-  // Use component cause if available, otherwise native cause
-  const displayCauseType = cause.componentCause || cause.type;
-  const config = cause.componentCause ? COMPONENT_CAUSE_CONFIG[cause.componentCause] : CAUSE_CONFIG[cause.type];
-  const hasHookChanges = cause.hookChanges && cause.hookChanges.length > 0;
-  const hasChangedKeys = cause.changedKeys && cause.changedKeys.length > 0;
-
-  // Get contextual label based on cause type
-  const getLabel = () => {
-    if (cause.type === "mount") return "First render";
-    if (displayCauseType === "parent") return "Triggered by";
-    return "Changed:";
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    testID: "buoy-highlight-detail-cause",
-    style: styles.answerCard,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.causeBadgeRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        testID: "buoy-highlight-detail-cause-label",
-        style: styles.causeLabel,
-        children: getLabel()
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.causeBadgeLarge, {
-          backgroundColor: config.color + "20"
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-cause-badge",
-          style: [styles.causeBadgeLargeText, {
-            color: config.color
-          }],
-          children: config.label.toUpperCase()
-        })
-      })]
-    }), hasHookChanges && /*#__PURE__*/_jsx(View, {
-      style: styles.hookChangesContainer,
-      children: cause.hookChanges.map((hook, index) => {
-        const hookKey = `${hook.type}[${hook.index}]`;
-        const oldValue = {
-          [hookKey]: hook.previousValue
-        };
-        const newValue = {
-          [hookKey]: hook.currentValue
-        };
-        return /*#__PURE__*/_jsx(View, {
-          style: styles.hookDiffContainer,
-          children: /*#__PURE__*/_jsx(TreeDiffViewer, {
-            oldValue: oldValue,
-            newValue: newValue,
-            theme: "dark",
-            showUnchanged: false
-          })
-        }, index);
-      })
-    }), !hasHookChanges && hasChangedKeys && /*#__PURE__*/_jsx(View, {
-      style: styles.propsChangesContainer,
-      children: cause.changedKeys.filter(k => !k.includes("(ref only)")).slice(0, 5).map((key, index) => /*#__PURE__*/_jsx(View, {
-        style: styles.propChangeChip,
-        children: /*#__PURE__*/_jsx(Text, {
-          testID: `buoy-highlight-detail-changed-${index}`,
-          style: styles.propChangeText,
-          children: key
-        })
-      }, index))
-    })]
-  });
-}
-
-/**
- * DetailsSection - Component identifiers, measurements, and stats
- * Helps devs find the component in their codebase
- */
-function DetailsSection({
-  render,
-  rendersPerSec
-}) {
-  const hasIdentifiers = render.testID || render.nativeID || render.accessibilityLabel;
-  const hasMeasurements = render.measurements;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.detailsSection,
-    children: [hasIdentifiers && /*#__PURE__*/_jsxs(View, {
-      testID: "buoy-highlight-detail-identifiers",
-      style: styles.detailsCard,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.detailsCardTitle,
-        children: "Identifiers"
-      }), render.testID && /*#__PURE__*/_jsx(DetailRow, {
-        label: "testID",
-        value: render.testID
-      }), render.nativeID && /*#__PURE__*/_jsx(DetailRow, {
-        label: "nativeID",
-        value: render.nativeID
-      }), render.accessibilityLabel && /*#__PURE__*/_jsx(DetailRow, {
-        label: "a11y",
-        value: render.accessibilityLabel
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      testID: "buoy-highlight-detail-stats",
-      style: styles.statsRow,
-      children: [/*#__PURE__*/_jsxs(View, {
-        testID: "buoy-highlight-detail-stat-renders",
-        style: styles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-stat-renders-value",
-          style: [styles.statValue, {
-            color: render.color
-          }],
-          children: render.renderCount
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.statLabel,
-          children: "renders"
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.statDivider
-      }), /*#__PURE__*/_jsxs(View, {
-        testID: "buoy-highlight-detail-stat-rate",
-        style: styles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-stat-rate-value",
-          style: styles.statValue,
-          children: rendersPerSec
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.statLabel,
-          children: "/sec"
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.statDivider
-      }), /*#__PURE__*/_jsxs(View, {
-        testID: "buoy-highlight-detail-stat-tag",
-        style: styles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-stat-tag-value",
-          style: styles.statValue,
-          children: render.nativeTag
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.statLabel,
-          children: "tag"
-        })]
-      })]
-    }), hasMeasurements && /*#__PURE__*/_jsxs(View, {
-      testID: "buoy-highlight-detail-measure",
-      style: styles.measurementsRow,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.measurementItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.measurementLabel,
-          children: "x"
-        }), /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-measure-x",
-          style: styles.measurementValue,
-          children: Math.round(render.measurements.x)
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.measurementItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.measurementLabel,
-          children: "y"
-        }), /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-measure-y",
-          style: styles.measurementValue,
-          children: Math.round(render.measurements.y)
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.measurementItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.measurementLabel,
-          children: "w"
-        }), /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-measure-w",
-          style: styles.measurementValue,
-          children: Math.round(render.measurements.width)
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.measurementItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.measurementLabel,
-          children: "h"
-        }), /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-detail-measure-h",
-          style: styles.measurementValue,
-          children: Math.round(render.measurements.height)
-        })]
-      })]
-    })]
-  });
-}
-
-/**
- * DetailRow - Single row for identifier display
- */
-function DetailRow({
-  label,
-  value
-}) {
-  const handle = `buoy-highlight-detail-id-${label.toLowerCase()}`;
-  return /*#__PURE__*/_jsxs(View, {
-    testID: handle,
-    style: styles.detailRow,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.detailLabel,
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      testID: `${handle}-value`,
-      style: styles.detailValue,
-      numberOfLines: 1,
-      children: value
-    })]
-  });
-}
-
-/**
- * QuickActionsSection - Quick filter actions for the component
- * Users select a filter option, then use action buttons to include/exclude
- */
-function QuickActionsSection({
-  render,
-  onAddFilter
-}) {
-  const [selectedIndex, setSelectedIndex] = useState(null);
-
-  // Build list of available filter options (most specific to most general)
-  const filterOptions = useMemo(() => {
-    const options = [];
-
-    // Most specific first
-    if (render.nativeID) {
-      options.push({
-        type: "nativeID",
-        value: render.nativeID,
-        label: "nativeID"
-      });
-    }
-    if (render.testID) {
-      options.push({
-        type: "testID",
-        value: render.testID,
-        label: "testID"
-      });
-    }
-    if (render.accessibilityLabel) {
-      options.push({
-        type: "accessibilityLabel",
-        value: render.accessibilityLabel,
-        label: "a11y"
-      });
-    }
-    if (render.componentName) {
-      options.push({
-        type: "component",
-        value: render.componentName,
-        label: "component"
-      });
-    }
-    // Most general last (always available)
-    options.push({
-      type: "viewType",
-      value: render.viewType,
-      label: "viewType"
-    });
-    return options;
-  }, [render]);
-  const selectedOption = selectedIndex !== null ? filterOptions[selectedIndex] : null;
-  const handleSelectOption = useCallback(index => {
-    setSelectedIndex(prev => prev === index ? null : index);
-  }, []);
-  const handleInclude = useCallback(() => {
-    if (selectedOption) {
-      onAddFilter({
-        type: selectedOption.type,
-        value: selectedOption.value
-      }, "include");
-      setSelectedIndex(null);
-    }
-  }, [selectedOption, onAddFilter]);
-  const handleExclude = useCallback(() => {
-    if (selectedOption) {
-      onAddFilter({
-        type: selectedOption.type,
-        value: selectedOption.value
-      }, "exclude");
-      setSelectedIndex(null);
-    }
-  }, [selectedOption, onAddFilter]);
-  return /*#__PURE__*/_jsxs(View, {
-    testID: "buoy-highlight-quick",
-    style: styles.quickActionsSection,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.quickActionsTitle,
-      children: "Quick Filters"
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.filterOptionsList,
-      children: filterOptions.map((option, index) => /*#__PURE__*/_jsx(FilterOptionCard, {
-        testID: `buoy-highlight-quick-${option.type.toLowerCase()}`,
-        label: option.label,
-        value: option.value,
-        isSelected: selectedIndex === index,
-        onSelect: () => handleSelectOption(index)
-      }, option.type))
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.filterActionButtons,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        testID: "buoy-highlight-quick-include",
-        accessibilityRole: "button",
-        accessibilityLabel: "Only show this",
-        style: [styles.filterActionButton, styles.filterActionButtonInclude, !selectedOption && styles.filterActionButtonDisabled],
-        onPress: handleInclude,
-        disabled: !selectedOption,
-        activeOpacity: 0.7,
-        children: [/*#__PURE__*/_jsx(PlusIcon, {
-          size: 14,
-          color: selectedOption ? night.color.accent : night.color.textTertiary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.filterActionButtonText, {
-            color: selectedOption ? night.color.accent : night.color.textTertiary
-          }],
-          children: "Only Show This"
-        })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        testID: "buoy-highlight-quick-exclude",
-        accessibilityRole: "button",
-        accessibilityLabel: "Hide this",
-        style: [styles.filterActionButton, styles.filterActionButtonExclude, !selectedOption && styles.filterActionButtonDisabled],
-        onPress: handleExclude,
-        disabled: !selectedOption,
-        activeOpacity: 0.7,
-        children: [/*#__PURE__*/_jsx(MinusIcon, {
-          size: 14,
-          color: selectedOption ? night.color.danger : night.color.textTertiary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.filterActionButtonText, {
-            color: selectedOption ? night.color.danger : night.color.textTertiary
-          }],
-          children: "Hide This"
-        })]
-      })]
-    })]
-  });
-}
-
-/**
- * FilterOptionCard - A selectable filter option card
- */
-function FilterOptionCard({
-  testID,
-  label,
-  value,
-  isSelected,
-  onSelect
-}) {
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    testID: testID,
-    accessibilityRole: "button",
-    accessibilityLabel: `${label}, ${value}`,
-    style: [styles.filterOptionCard, isSelected && styles.filterOptionCardSelected],
-    onPress: onSelect,
-    activeOpacity: 0.7,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.filterOptionLabel, isSelected && styles.filterOptionLabelSelected],
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      testID: testID ? `${testID}-value` : undefined,
-      style: [styles.filterOptionValue, isSelected && styles.filterOptionValueSelected],
-      numberOfLines: 1,
-      children: value
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  // Header
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 12,
-    padding: 16,
-    paddingBottom: 0
-  },
-  // ScrollView
-  scrollView: {
-    flex: 1
-  },
-  scrollContent: {
-    padding: 16,
-    paddingTop: 12,
-    paddingBottom: 80,
-    gap: 12
-  },
-  headerLeft: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10
-  },
-  componentName: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: night.color.text,
-    flexShrink: 1
-  },
-  nativeTypeBadge: {
-    // Inset display chip — the night track color.
-    backgroundColor: night.color.bg,
-    paddingVertical: 3,
-    paddingHorizontal: 8,
-    borderRadius: 4
-  },
-  nativeTypeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  },
-  // Answer Card
-  answerCard: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.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: 0.5
-  },
-  causeLabel: {
-    fontSize: 12,
-    color: night.color.textSecondary,
-    fontWeight: "500"
-  },
-  hookChangesContainer: {
-    gap: 6
-  },
-  hookDiffContainer: {
-    // Inset code box — the night track color.
-    backgroundColor: night.color.bg,
-    borderRadius: 6,
-    overflow: "hidden"
-  },
-  propsChangesContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 4
-  },
-  propChangeChip: {
-    // Inset display chip — the night track color.
-    backgroundColor: night.color.bg,
-    paddingVertical: 2,
-    paddingHorizontal: 6,
-    borderRadius: 4
-  },
-  propChangeText: {
-    fontSize: 11,
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  // Details Section
-  detailsSection: {
-    gap: 10
-  },
-  detailsCard: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12,
-    gap: 6
-  },
-  detailsCardTitle: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    marginBottom: 4
-  },
-  detailRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  detailLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    minWidth: 55
-  },
-  detailValue: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  // Stats Row
-  statsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingVertical: 10,
-    paddingHorizontal: 16
-  },
-  statItem: {
-    flex: 1,
-    alignItems: "center"
-  },
-  statValue: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  statLabel: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    marginTop: 2
-  },
-  statDivider: {
-    width: 1,
-    height: 24,
-    backgroundColor: night.color.border,
-    marginHorizontal: 12
-  },
-  // Measurements Row
-  measurementsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-around",
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingVertical: 8,
-    paddingHorizontal: 12
-  },
-  measurementItem: {
-    flexDirection: "row",
-    alignItems: "baseline",
-    gap: 4
-  },
-  measurementLabel: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    textTransform: "uppercase"
-  },
-  measurementValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  // Quick Actions Section
-  quickActionsSection: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12,
-    gap: 10
-  },
-  quickActionsTitle: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    marginBottom: 2
-  },
-  filterOptionsList: {
-    gap: 6
-  },
-  filterOptionCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    borderWidth: 1,
-    borderColor: "transparent",
-    gap: 10
-  },
-  filterOptionCardSelected: {
-    borderColor: night.color.accentBorderStrong,
-    backgroundColor: night.color.accentSoft
-  },
-  filterOptionLabel: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    minWidth: 70
-  },
-  filterOptionLabelSelected: {
-    color: night.color.accent
-  },
-  filterOptionValue: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  filterOptionValueSelected: {
-    color: night.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: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  filterActionButtonExclude: {
-    backgroundColor: night.color.dangerSoft,
-    borderColor: night.color.danger + "40"
-  },
-  filterActionButtonDisabled: {
-    backgroundColor: night.color.surfaceElevated,
-    borderColor: night.color.border,
-    opacity: 0.5
-  },
-  filterActionButtonText: {
-    fontSize: 11,
-    fontWeight: "600"
-  },
-  // Locked Banner
-  lockedBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.warning + "40",
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    gap: 8
-  },
-  lockedBannerText: {
-    color: night.color.warning,
-    fontSize: 13,
-    fontWeight: "600"
-  },
-  lockedBannerSubtext: {
-    color: night.color.textTertiary,
-    fontSize: 12
-  }
-});
-export default RenderDetailView;
+"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;