@buoy-gg/highlight-updates 7.0.38 → 7.0.40

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

@@ -1 +1,469 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RendersCopySettingsView=RendersCopySettingsView;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_copySettings=require("../types/copySettings"),_rendersExportFormatter=require("../utils/rendersExportFormatter"),_copySettingsStorage=require("../utils/copySettingsStorage"),_jsxRuntime=require("react/jsx-runtime");const SIZE_WARNING_THRESHOLD=51200,SIZE_DANGER_THRESHOLD=204800,CAUSE_OPTIONS=[{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 formatBytes(e){return e<1024?`${e} B`:e<1048576?`${(e/1024).toFixed(1)} KB`:`${(e/1048576).toFixed(1)} MB`}function createMockRenders(){const e=Date.now();return[{id:"1",nativeTag:1,viewType:"RCTView",displayName:"View",componentName:"PokemonListItem",renderCount:30,firstRenderTime:e-5e3,lastRenderTime:e,color:"#10B981",lastRenderCause:{type:"parent",timestamp:e,componentCause:"parent"}},{id:"2",nativeTag:2,viewType:"RCTView",displayName:"View",componentName:"CartHeader",renderCount:12,firstRenderTime:e-4e3,lastRenderTime:e,color:"#3B82F6",lastRenderCause:{type:"hooks",timestamp:e,componentCause:"state",hookChanges:[{type:"useState",index:2,previousValue:4,currentValue:5}]}},{id:"3",nativeTag:3,viewType:"RCTView",displayName:"View",componentName:"SearchBar",renderCount:8,firstRenderTime:e-3e3,lastRenderTime:e,color:"#F59E0B",lastRenderCause:{type:"props",timestamp:e,componentCause:"props",changedKeys:["query","onChange"]}}]}function RendersCopySettingsView({renders:e}){const[t,i]=(0,_react.useState)(_copySettings.DEFAULT_COPY_SETTINGS),[a,s]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{let e=!0;return(0,_copySettingsStorage.loadCopySettings)().then(t=>{e&&t&&i(t)}),()=>{e=!1}},[]);const r=(0,_react.useCallback)(e=>{i(e),(0,_copySettingsStorage.saveCopySettings)(e)},[]),o=e.length>0,l=o?e:createMockRenders(),n=(0,_react.useMemo)(()=>(0,_copySettings.detectActivePreset)(t),[t]),c=(0,_react.useMemo)(()=>(0,_rendersExportFormatter.estimateExportSize)(l,t),[l,t]),d=(0,_react.useMemo)(()=>c>=SIZE_DANGER_THRESHOLD?"danger":c>=SIZE_WARNING_THRESHOLD?"warning":"none",[c]),u=(0,_react.useCallback)(()=>(0,_rendersExportFormatter.generateExport)(l,t),[l,t]),p=(0,_react.useCallback)(e=>{const t=_copySettings.COPY_PRESETS[e];t&&r({...t,filterCauses:[...t.filterCauses]})},[r]),m=(0,_react.useCallback)((e,i)=>{const[a,s]=e.split("::");if("preset"!==a)if("format"!==a)if("sort"!==a)if("topN"!==a)if("minRenders"!==a){if("cause"===a){const e=i,a=t.filterCauses.includes(e);return void r({...t,filterCauses:a?t.filterCauses.filter(t=>t!==e):[...t.filterCauses,e]})}if("signal"===a){const e=s;return void r({...t,[e]:!t[e]})}}else r({...t,minRenders:i});else r({...t,topN:i});else r({...t,sortBy:i});else r({...t,format:i});else p(s)},[t,r,p]),y=(0,_react.useCallback)(()=>{const{totalComponents:e,totalRenders:t}=(0,_rendersExportFormatter.getExportSummary)(l);return(0,_jsxRuntime.jsx)(_sharedUi.ExportPreview,{expanded:a,onExpandedChange:s,summary:`${e} component${1!==e?"s":""} · ${t} renders · ~${formatBytes(c)}${o?"":" (mock data)"}`,warningLevel:d,warningText:{warning:"Large payload — preview may be slow",danger:"Very large payload — 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 e=u();return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{testID:"buoy-highlight-copy-preview-scroll",style:styles.previewScroll,nestedScrollEnabled:!0,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-copy-preview-text",style:styles.previewText,selectable:!0,children:e})})}})},[a,l,c,d,o,u]),g=(0,_react.useCallback)(()=>{const{totalComponents:e}=(0,_rendersExportFormatter.getExportSummary)(l),t=o?`${e} components`:"Mock data (no renders captured)";return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-copy-status",style:styles.statusLabel,children:t}),(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:u})]})},[o,l,u]),_=(0,_react.useMemo)(()=>({sections:[{id:"presets",title:"Presets",type:"custom",data:[{id:"preset::llm",label:_copySettings.PRESET_METADATA.llm.label,icon:_sharedUi.Zap,color:_copySettings.PRESET_METADATA.llm.color,value:"llm",isActive:"llm"===n,description:_copySettings.PRESET_METADATA.llm.description},{id:"preset::table",label:_copySettings.PRESET_METADATA.table.label,icon:_sharedUi.FileText,color:_copySettings.PRESET_METADATA.table.color,value:"table",isActive:"table"===n,description:_copySettings.PRESET_METADATA.table.description},{id:"preset::json",label:_copySettings.PRESET_METADATA.json.label,icon:_sharedUi.FileCode,color:_copySettings.PRESET_METADATA.json.color,value:"json",isActive:"json"===n,description:_copySettings.PRESET_METADATA.json.description},{id:"preset::full",label:_copySettings.PRESET_METADATA.full.label,icon:_sharedUi.Layers,color:_copySettings.PRESET_METADATA.full.color,value:"full",isActive:"full"===n,description:_copySettings.PRESET_METADATA.full.description},{id:"preset::custom",label:"Custom",icon:_sharedUi.Settings,color:_sharedUi.night.color.textSecondary,value:"custom",isActive:null===n,description:"User-configured"}]},{id:"format",title:"Format",type:"custom",data:[{id:"format::summary",label:"Summary",icon:_sharedUi.Zap,color:_sharedUi.macOSColors.semantic.success,value:"summary",isActive:"summary"===t.format,description:"Compact, LLM-ready"},{id:"format::markdown-table",label:"Table",icon:_sharedUi.FileText,color:_sharedUi.macOSColors.semantic.info,value:"markdown-table",isActive:"markdown-table"===t.format,description:"Markdown table"},{id:"format::json",label:"JSON",icon:_sharedUi.FileCode,color:_sharedUi.macOSColors.semantic.warning,value:"json",isActive:"json"===t.format,description:"Structured data"}]},{id:"sort",title:"Sort By",type:"custom",data:[{id:"sort::renderCount",label:"Count",value:"renderCount",isActive:"renderCount"===t.sortBy,description:"Total renders"},{id:"sort::rate",label:"Rate",value:"rate",isActive:"rate"===t.sortBy,description:"Renders / sec"},{id:"sort::name",label:"Name",value:"name",isActive:"name"===t.sortBy,description:"Alphabetical"}]},{id:"topN",title:"Top N",type:"custom",data:[{id:"topN::10",label:"10",value:10,isActive:10===t.topN},{id:"topN::25",label:"25",value:25,isActive:25===t.topN},{id:"topN::50",label:"50",value:50,isActive:50===t.topN},{id:"topN::100",label:"100",value:100,isActive:100===t.topN},{id:"topN::-1",label:"All",value:-1,isActive:-1===t.topN}]},{id:"minRenders",title:"Min Renders",type:"custom",data:[{id:"minRenders::1",label:"1",value:1,isActive:1===t.minRenders},{id:"minRenders::2",label:"2",value:2,isActive:2===t.minRenders},{id:"minRenders::3",label:"3",value:3,isActive:3===t.minRenders},{id:"minRenders::5",label:"5",value:5,isActive:5===t.minRenders},{id:"minRenders::10",label:"10",value:10,isActive:10===t.minRenders}]},{id:"causes",title:"Filter Causes",type:"custom",description:0===t.filterCauses.length?"All causes shown":"Only the selected causes shown",data:CAUSE_OPTIONS.map(e=>({id:`cause::${e.value}`,label:e.label,value:e.value,isActive:t.filterCauses.includes(e.value)}))},{id:"signal",title:"Signal Extraction",type:"custom",data:[{id:"signal::groupByName",label:"Group by name",value:"groupByName",isActive:t.groupByName,description:"Collapse list items"},{id:"signal::aggregateCauses",label:"Aggregate causes",value:"aggregateCauses",isActive:t.aggregateCauses,description:"Hook x N"},{id:"signal::includeHistory",label:"Include history",value:"includeHistory",isActive:t.includeHistory,description:"JSON only — large"}]}],previewSection:{enabled:!0,title:"PREVIEW",icon:_sharedUi.Eye,content:y,headerActions:g},onFilterChange:m}),[t,n,m,y,g]);return(0,_jsxRuntime.jsx)(_sharedUi.DynamicFilterView,{..._})}const styles=_reactNative.StyleSheet.create({previewScroll:{maxHeight:360},previewText:{fontFamily:_sharedUi.monoFont,fontSize:11,color:_sharedUi.night.color.text,lineHeight:18},statusLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,marginRight:8}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RendersCopySettingsView = RendersCopySettingsView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _copySettings = require("../types/copySettings");
+var _rendersExportFormatter = require("../utils/rendersExportFormatter");
+var _copySettingsStorage = require("../utils/copySettingsStorage");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * RendersCopySettingsView
+ *
+ * Settings UI for configuring render report export.
+ * Mirrors EventsCopySettingsView but with renders-specific options.
+ */
+
+const SIZE_WARNING_THRESHOLD = 50 * 1024;
+const SIZE_DANGER_THRESHOLD = 200 * 1024;
+const CAUSE_OPTIONS = [{
+  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 formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function createMockRenders() {
+  const now = Date.now();
+  return [{
+    id: "1",
+    nativeTag: 1,
+    viewType: "RCTView",
+    displayName: "View",
+    componentName: "PokemonListItem",
+    renderCount: 30,
+    firstRenderTime: now - 5000,
+    lastRenderTime: now,
+    color: "#10B981",
+    lastRenderCause: {
+      type: "parent",
+      timestamp: now,
+      componentCause: "parent"
+    }
+  }, {
+    id: "2",
+    nativeTag: 2,
+    viewType: "RCTView",
+    displayName: "View",
+    componentName: "CartHeader",
+    renderCount: 12,
+    firstRenderTime: now - 4000,
+    lastRenderTime: now,
+    color: "#3B82F6",
+    lastRenderCause: {
+      type: "hooks",
+      timestamp: now,
+      componentCause: "state",
+      hookChanges: [{
+        type: "useState",
+        index: 2,
+        previousValue: 4,
+        currentValue: 5
+      }]
+    }
+  }, {
+    id: "3",
+    nativeTag: 3,
+    viewType: "RCTView",
+    displayName: "View",
+    componentName: "SearchBar",
+    renderCount: 8,
+    firstRenderTime: now - 3000,
+    lastRenderTime: now,
+    color: "#F59E0B",
+    lastRenderCause: {
+      type: "props",
+      timestamp: now,
+      componentCause: "props",
+      changedKeys: ["query", "onChange"]
+    }
+  }];
+}
+function RendersCopySettingsView({
+  renders
+}) {
+  const [settings, setSettings] = (0, _react.useState)(_copySettings.DEFAULT_COPY_SETTINGS);
+  const [isPreviewExpanded, setIsPreviewExpanded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    (0, _copySettingsStorage.loadCopySettings)().then(saved => {
+      if (mounted && saved) setSettings(saved);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  const updateSettings = (0, _react.useCallback)(next => {
+    setSettings(next);
+    (0, _copySettingsStorage.saveCopySettings)(next);
+  }, []);
+  const hasLiveData = renders.length > 0;
+  const previewRenders = hasLiveData ? renders : createMockRenders();
+  const activePreset = (0, _react.useMemo)(() => (0, _copySettings.detectActivePreset)(settings), [settings]);
+  const estimatedSize = (0, _react.useMemo)(() => (0, _rendersExportFormatter.estimateExportSize)(previewRenders, settings), [previewRenders, settings]);
+  const sizeWarningLevel = (0, _react.useMemo)(() => {
+    if (estimatedSize >= SIZE_DANGER_THRESHOLD) return "danger";
+    if (estimatedSize >= SIZE_WARNING_THRESHOLD) return "warning";
+    return "none";
+  }, [estimatedSize]);
+  const generateCopyText = (0, _react.useCallback)(() => (0, _rendersExportFormatter.generateExport)(previewRenders, settings), [previewRenders, settings]);
+  const applyPreset = (0, _react.useCallback)(name => {
+    // "Custom" is what the list shows once the settings match no preset;
+    // choosing it changes nothing.
+    const preset = _copySettings.COPY_PRESETS[name];
+    if (!preset) return;
+    updateSettings({
+      ...preset,
+      filterCauses: [...preset.filterCauses]
+    });
+  }, [updateSettings]);
+  const handleOptionChange = (0, _react.useCallback)((optionId, value) => {
+    const [group, key] = optionId.split("::");
+    if (group === "preset") {
+      applyPreset(key);
+      return;
+    }
+    if (group === "format") {
+      updateSettings({
+        ...settings,
+        format: value
+      });
+      return;
+    }
+    if (group === "sort") {
+      updateSettings({
+        ...settings,
+        sortBy: value
+      });
+      return;
+    }
+    if (group === "topN") {
+      updateSettings({
+        ...settings,
+        topN: value
+      });
+      return;
+    }
+    if (group === "minRenders") {
+      updateSettings({
+        ...settings,
+        minRenders: value
+      });
+      return;
+    }
+    if (group === "cause") {
+      const cause = value;
+      const has = settings.filterCauses.includes(cause);
+      updateSettings({
+        ...settings,
+        filterCauses: has ? settings.filterCauses.filter(c => c !== cause) : [...settings.filterCauses, cause]
+      });
+      return;
+    }
+    if (group === "signal") {
+      const k = key;
+      updateSettings({
+        ...settings,
+        [k]: !settings[k]
+      });
+      return;
+    }
+  }, [settings, updateSettings, applyPreset]);
+  const renderPreviewContent = (0, _react.useCallback)(() => {
+    const {
+      totalComponents,
+      totalRenders
+    } = (0, _rendersExportFormatter.getExportSummary)(previewRenders);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExportPreview, {
+      expanded: isPreviewExpanded,
+      onExpandedChange: setIsPreviewExpanded,
+      summary: `${totalComponents} component${totalComponents !== 1 ? "s" : ""} · ${totalRenders} renders · ~${formatBytes(estimatedSize)}${!hasLiveData ? " (mock data)" : ""}`,
+      warningLevel: sizeWarningLevel,
+      warningText: {
+        warning: "Large payload — preview may be slow",
+        danger: "Very large payload — 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 exportText = generateCopyText();
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          testID: "buoy-highlight-copy-preview-scroll",
+          style: styles.previewScroll,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: "buoy-highlight-copy-preview-text",
+            style: styles.previewText,
+            selectable: true,
+            children: exportText
+          })
+        });
+      }
+    });
+  }, [isPreviewExpanded, previewRenders, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText]);
+  const renderPreviewHeaderActions = (0, _react.useCallback)(() => {
+    const {
+      totalComponents
+    } = (0, _rendersExportFormatter.getExportSummary)(previewRenders);
+    const statusLabel = hasLiveData ? `${totalComponents} components` : "Mock data (no renders captured)";
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "buoy-highlight-copy-status",
+        style: styles.statusLabel,
+        children: statusLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+        value: generateCopyText
+      })]
+    });
+  }, [hasLiveData, previewRenders, generateCopyText]);
+  const dynamicFilterConfig = (0, _react.useMemo)(() => ({
+    sections: [{
+      id: "presets",
+      title: "Presets",
+      type: "custom",
+      data: [{
+        id: "preset::llm",
+        label: _copySettings.PRESET_METADATA.llm.label,
+        icon: _sharedUi.Zap,
+        color: _copySettings.PRESET_METADATA.llm.color,
+        value: "llm",
+        isActive: activePreset === "llm",
+        description: _copySettings.PRESET_METADATA.llm.description
+      }, {
+        id: "preset::table",
+        label: _copySettings.PRESET_METADATA.table.label,
+        icon: _sharedUi.FileText,
+        color: _copySettings.PRESET_METADATA.table.color,
+        value: "table",
+        isActive: activePreset === "table",
+        description: _copySettings.PRESET_METADATA.table.description
+      }, {
+        id: "preset::json",
+        label: _copySettings.PRESET_METADATA.json.label,
+        icon: _sharedUi.FileCode,
+        color: _copySettings.PRESET_METADATA.json.color,
+        value: "json",
+        isActive: activePreset === "json",
+        description: _copySettings.PRESET_METADATA.json.description
+      }, {
+        id: "preset::full",
+        label: _copySettings.PRESET_METADATA.full.label,
+        icon: _sharedUi.Layers,
+        color: _copySettings.PRESET_METADATA.full.color,
+        value: "full",
+        isActive: activePreset === "full",
+        description: _copySettings.PRESET_METADATA.full.description
+      }, {
+        id: "preset::custom",
+        label: "Custom",
+        icon: _sharedUi.Settings,
+        color: _sharedUi.night.color.textSecondary,
+        value: "custom",
+        isActive: activePreset === null,
+        description: "User-configured"
+      }]
+    }, {
+      id: "format",
+      title: "Format",
+      type: "custom",
+      data: [{
+        id: "format::summary",
+        label: "Summary",
+        icon: _sharedUi.Zap,
+        color: _sharedUi.macOSColors.semantic.success,
+        value: "summary",
+        isActive: settings.format === "summary",
+        description: "Compact, LLM-ready"
+      }, {
+        id: "format::markdown-table",
+        label: "Table",
+        icon: _sharedUi.FileText,
+        color: _sharedUi.macOSColors.semantic.info,
+        value: "markdown-table",
+        isActive: settings.format === "markdown-table",
+        description: "Markdown table"
+      }, {
+        id: "format::json",
+        label: "JSON",
+        icon: _sharedUi.FileCode,
+        color: _sharedUi.macOSColors.semantic.warning,
+        value: "json",
+        isActive: settings.format === "json",
+        description: "Structured data"
+      }]
+    }, {
+      id: "sort",
+      title: "Sort By",
+      type: "custom",
+      data: [{
+        id: "sort::renderCount",
+        label: "Count",
+        value: "renderCount",
+        isActive: settings.sortBy === "renderCount",
+        description: "Total renders"
+      }, {
+        id: "sort::rate",
+        label: "Rate",
+        value: "rate",
+        isActive: settings.sortBy === "rate",
+        description: "Renders / sec"
+      }, {
+        id: "sort::name",
+        label: "Name",
+        value: "name",
+        isActive: settings.sortBy === "name",
+        description: "Alphabetical"
+      }]
+    }, {
+      id: "topN",
+      title: "Top N",
+      type: "custom",
+      data: [{
+        id: "topN::10",
+        label: "10",
+        value: 10,
+        isActive: settings.topN === 10
+      }, {
+        id: "topN::25",
+        label: "25",
+        value: 25,
+        isActive: settings.topN === 25
+      }, {
+        id: "topN::50",
+        label: "50",
+        value: 50,
+        isActive: settings.topN === 50
+      }, {
+        id: "topN::100",
+        label: "100",
+        value: 100,
+        isActive: settings.topN === 100
+      }, {
+        id: "topN::-1",
+        label: "All",
+        value: -1,
+        isActive: settings.topN === -1
+      }]
+    }, {
+      id: "minRenders",
+      title: "Min Renders",
+      type: "custom",
+      data: [{
+        id: "minRenders::1",
+        label: "1",
+        value: 1,
+        isActive: settings.minRenders === 1
+      }, {
+        id: "minRenders::2",
+        label: "2",
+        value: 2,
+        isActive: settings.minRenders === 2
+      }, {
+        id: "minRenders::3",
+        label: "3",
+        value: 3,
+        isActive: settings.minRenders === 3
+      }, {
+        id: "minRenders::5",
+        label: "5",
+        value: 5,
+        isActive: settings.minRenders === 5
+      }, {
+        id: "minRenders::10",
+        label: "10",
+        value: 10,
+        isActive: settings.minRenders === 10
+      }]
+    }, {
+      id: "causes",
+      title: "Filter Causes",
+      type: "custom",
+      description: settings.filterCauses.length === 0 ? "All causes shown" : "Only the selected causes shown",
+      data: CAUSE_OPTIONS.map(opt => ({
+        id: `cause::${opt.value}`,
+        label: opt.label,
+        value: opt.value,
+        isActive: settings.filterCauses.includes(opt.value)
+      }))
+    }, {
+      id: "signal",
+      title: "Signal Extraction",
+      type: "custom",
+      data: [{
+        id: "signal::groupByName",
+        label: "Group by name",
+        value: "groupByName",
+        isActive: settings.groupByName,
+        description: "Collapse list items"
+      }, {
+        id: "signal::aggregateCauses",
+        label: "Aggregate causes",
+        value: "aggregateCauses",
+        isActive: settings.aggregateCauses,
+        description: "Hook x N"
+      }, {
+        id: "signal::includeHistory",
+        label: "Include history",
+        value: "includeHistory",
+        isActive: settings.includeHistory,
+        description: "JSON only — large"
+      }]
+    }],
+    previewSection: {
+      enabled: true,
+      title: "PREVIEW",
+      icon: _sharedUi.Eye,
+      content: renderPreviewContent,
+      headerActions: renderPreviewHeaderActions
+    },
+    onFilterChange: handleOptionChange
+  }), [settings, activePreset, handleOptionChange, renderPreviewContent, renderPreviewHeaderActions]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DynamicFilterView, {
+    ...dynamicFilterConfig
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  previewScroll: {
+    maxHeight: 360
+  },
+  previewText: {
+    fontFamily: _sharedUi.monoFont,
+    fontSize: 11,
+    color: _sharedUi.night.color.text,
+    lineHeight: 18
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: _sharedUi.night.color.textTertiary,
+    marginRight: 8
+  }
+});

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

@@ -1 +1,73 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.StatsDisplay=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_RenderTracker=require("../utils/RenderTracker"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(i=t?a:r){if(i.has(e))return i.get(e);i.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(n,t,o):n[t]=e[t]);return n})(e,t)}function StatsDisplayInner(){const[e,t]=(0,_react.useState)({totalComponents:0,totalRenders:0});return(0,_react.useEffect)(()=>_RenderTracker.RenderTracker.subscribe(()=>{t(_RenderTracker.RenderTracker.getStats())}),[]),(0,_jsxRuntime.jsxs)(_reactNative.View,{nativeID:"__rn_buoy__stats-row",testID:"buoy-highlight-stats",accessibilityLabel:`${e.totalComponents} components tracked`,style:styles.headerChip,children:[(0,_jsxRuntime.jsx)(_sharedUi.Activity,{size:12,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-highlight-stats-value",style:[styles.headerChipValue,{color:_sharedUi.night.color.accent}],children:e.totalComponents})]})}const StatsDisplay=exports.StatsDisplay=(0,_react.memo)(StatsDisplayInner),styles=_reactNative.StyleSheet.create({headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:_sharedUi.night.color.buttonSurface,paddingHorizontal:8,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:_sharedUi.night.color.border},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:_sharedUi.monoFont}});var _default=exports.default=StatsDisplay;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StatsDisplay = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _RenderTracker = require("../utils/RenderTracker");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * StatsDisplay
+ *
+ * Isolated component for displaying render statistics in the header.
+ * Subscribes to RenderTracker updates independently so parent header
+ * doesn't re-render when stats change.
+ *
+ * Following the optimization guide: move subscriptions to child components.
+ */
+
+/**
+ * Isolated stats display that owns its own subscription.
+ * Only this component re-renders when stats change.
+ */function StatsDisplayInner() {
+  const [stats, setStats] = (0, _react.useState)({
+    totalComponents: 0,
+    totalRenders: 0
+  });
+  (0, _react.useEffect)(() => {
+    const unsubscribe = _RenderTracker.RenderTracker.subscribe(() => {
+      setStats(_RenderTracker.RenderTracker.getStats());
+    });
+    return unsubscribe;
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    nativeID: "__rn_buoy__stats-row",
+    testID: "buoy-highlight-stats",
+    accessibilityLabel: `${stats.totalComponents} components tracked`,
+    style: styles.headerChip,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
+      size: 12,
+      color: _sharedUi.night.color.accent
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: "buoy-highlight-stats-value",
+      style: [styles.headerChipValue, {
+        color: _sharedUi.night.color.accent
+      }],
+      children: stats.totalComponents
+    })]
+  });
+}
+const StatsDisplay = exports.StatsDisplay = /*#__PURE__*/(0, _react.memo)(StatsDisplayInner);
+const styles = _reactNative.StyleSheet.create({
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: _sharedUi.night.color.buttonSurface,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: _sharedUi.monoFont
+  }
+});
+var _default = exports.default = StatsDisplay;

package/lib/commonjs/highlight-updates/types/copySettings.js

@@ -1 +1,107 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PRESET_METADATA=exports.DEFAULT_COPY_SETTINGS=exports.COPY_PRESETS=void 0,exports.detectActivePreset=detectActivePreset;const DEFAULT_COPY_SETTINGS=exports.DEFAULT_COPY_SETTINGS={format:"summary",topN:25,minRenders:2,filterCauses:[],groupByName:!0,aggregateCauses:!0,sortBy:"renderCount",includeHistory:!1},COPY_PRESETS=exports.COPY_PRESETS={llm:{format:"summary",topN:25,minRenders:2,filterCauses:[],groupByName:!0,aggregateCauses:!0,sortBy:"renderCount",includeHistory:!1},table:{format:"markdown-table",topN:50,minRenders:2,filterCauses:[],groupByName:!0,aggregateCauses:!0,sortBy:"renderCount",includeHistory:!1},json:{format:"json",topN:-1,minRenders:1,filterCauses:[],groupByName:!1,aggregateCauses:!0,sortBy:"renderCount",includeHistory:!1},full:{format:"json",topN:-1,minRenders:1,filterCauses:[],groupByName:!1,aggregateCauses:!1,sortBy:"renderCount",includeHistory:!0}};function detectActivePreset(e){for(const[r,t]of Object.entries(COPY_PRESETS))if(Object.keys(t).every(r=>{const o=e[r],s=t[r];return Array.isArray(o)&&Array.isArray(s)?o.length===s.length&&o.every((e,r)=>e===s[r]):o===s}))return r;return null}const PRESET_METADATA=exports.PRESET_METADATA={llm:{label:"LLM",description:"Compact summary for AI",color:"#10B981"},table:{label:"Table",description:"Markdown table",color:"#3B82F6"},json:{label:"JSON",description:"Structured data",color:"#F59E0B"},full:{label:"Full",description:"Everything incl. history",color:"#6B7280"}};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PRESET_METADATA = exports.DEFAULT_COPY_SETTINGS = exports.COPY_PRESETS = void 0;
+exports.detectActivePreset = detectActivePreset;
+/**
+ * Highlight Updates Copy Settings
+ *
+ * Configuration for exporting render reports as compact debug-focused output.
+ */
+
+// -1 = all
+
+const DEFAULT_COPY_SETTINGS = exports.DEFAULT_COPY_SETTINGS = {
+  format: "summary",
+  topN: 25,
+  minRenders: 2,
+  filterCauses: [],
+  groupByName: true,
+  aggregateCauses: true,
+  sortBy: "renderCount",
+  includeHistory: false
+};
+const COPY_PRESETS = exports.COPY_PRESETS = {
+  /** LLM-pasteable summary — the default */
+  llm: {
+    format: "summary",
+    topN: 25,
+    minRenders: 2,
+    filterCauses: [],
+    groupByName: true,
+    aggregateCauses: true,
+    sortBy: "renderCount",
+    includeHistory: false
+  },
+  /** Markdown table for PR descriptions */
+  table: {
+    format: "markdown-table",
+    topN: 50,
+    minRenders: 2,
+    filterCauses: [],
+    groupByName: true,
+    aggregateCauses: true,
+    sortBy: "renderCount",
+    includeHistory: false
+  },
+  /** Compact JSON, no history */
+  json: {
+    format: "json",
+    topN: -1,
+    minRenders: 1,
+    filterCauses: [],
+    groupByName: false,
+    aggregateCauses: true,
+    sortBy: "renderCount",
+    includeHistory: false
+  },
+  /** Full JSON dump including history (escape hatch) */
+  full: {
+    format: "json",
+    topN: -1,
+    minRenders: 1,
+    filterCauses: [],
+    groupByName: false,
+    aggregateCauses: false,
+    sortBy: "renderCount",
+    includeHistory: true
+  }
+};
+function detectActivePreset(settings) {
+  for (const [name, preset] of Object.entries(COPY_PRESETS)) {
+    const matches = Object.keys(preset).every(key => {
+      const a = settings[key];
+      const b = preset[key];
+      if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((v, i) => v === b[i]);
+      }
+      return a === b;
+    });
+    if (matches) return name;
+  }
+  return null;
+}
+const PRESET_METADATA = exports.PRESET_METADATA = {
+  llm: {
+    label: "LLM",
+    description: "Compact summary for AI",
+    color: "#10B981"
+  },
+  table: {
+    label: "Table",
+    description: "Markdown table",
+    color: "#3B82F6"
+  },
+  json: {
+    label: "JSON",
+    description: "Structured data",
+    color: "#F59E0B"
+  },
+  full: {
+    label: "Full",
+    description: "Everything incl. history",
+    color: "#6B7280"
+  }
+};