@buoy-gg/js-top 7.0.41 → 7.0.42

package/lib/commonjs/js-top/components/TaskTable.js

@@ -1,360 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.API_BADGE = void 0;
-exports.TaskTable = TaskTable;
-exports.badgeFor = badgeFor;
-exports.displayName = displayName;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * The ranked task table — the "process list".
- *
- * Row layout (phone-first): the API is a small colored badge and the FULL
- * width goes to the task name (the part that varies); numbers live on a
- * second stats line instead of fixed-width columns, so nothing truncates:
- *
- *   1  [INTERVAL] hotIntervalWork              1240 ms  41%
- *      ▓▓▓▓▓░░░░░  50 calls · avg 24.8 · max 31.0 · total 1.2k
- *
- * Sorting is a chip row above the list (column headers don't survive on a
- * narrow screen). Rows keyed by origin key (never index: rows re-rank every
- * tick) and memoized with a precise comparator so a tick only re-renders
- * rows whose numbers moved.
- */
-
-const SORT_OPTIONS = [{
-  key: "windowMs",
-  title: "RECENT"
-}, {
-  key: "calls",
-  title: "CALLS"
-}, {
-  key: "avgMs",
-  title: "AVG"
-}, {
-  key: "maxMs",
-  title: "MAX"
-}, {
-  key: "totalMs",
-  title: "TOTAL"
-}];
-const API_BADGE = exports.API_BADGE = {
-  timeout: {
-    text: "TIMEOUT",
-    color: "#38BDF8",
-    prefix: "setTimeout"
-  },
-  interval: {
-    text: "INTERVAL",
-    color: "#22D3EE",
-    prefix: "setInterval"
-  },
-  immediate: {
-    text: "IMMED",
-    color: "#60A5FA",
-    prefix: "setImmediate"
-  },
-  raf: {
-    text: "RAF",
-    color: "#34D399",
-    prefix: "requestAnimationFrame"
-  },
-  microtask: {
-    text: "MICRO",
-    color: "#A78BFA",
-    prefix: "queueMicrotask"
-  },
-  then: {
-    text: "PROMISE",
-    color: "#BF5AF2",
-    prefix: "Promise.then"
-  },
-  bridge: {
-    text: "BRIDGE",
-    color: "#FBBF24",
-    prefix: "bridge"
-  },
-  unattributed: {
-    text: "SYSTEM",
-    color: "#8E8E93"
-  },
-  other: {
-    text: "OTHER",
-    color: "#8E8E93",
-    prefix: "other"
-  }
-};
-function badgeFor(api) {
-  return API_BADGE[api] ?? API_BADGE.other;
-}
-
-/** The row label minus its API prefix — the badge already says the API. */
-function displayName(row) {
-  if (row.api === "unattributed") return "events · React · native call-ins";
-  if (row.api === "other") return "evicted cold origins";
-  const prefix = badgeFor(row.api).prefix;
-  let name = row.label;
-  if (prefix && name.startsWith(prefix)) name = name.slice(prefix.length);
-  name = name.replace(/^[\s←@]+/, "").trim();
-  return name.length > 0 ? name : "anonymous";
-}
-function fmt(n) {
-  if (n >= 10_000) return `${Math.round(n / 1000)}k`;
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
-  if (n >= 100) return `${Math.round(n)}`;
-  return `${Math.round(n * 10) / 10}`;
-}
-function statsLine(row) {
-  if (row.calls <= 0) return "measured by probe · not reachable from JS";
-  return `${fmt(row.calls)} calls · avg ${fmt(row.avgMs)} · max ${fmt(row.maxMs)} · total ${fmt(row.totalMs)} ms`;
-}
-const TaskRow = /*#__PURE__*/(0, _react.memo)(function TaskRow({
-  row,
-  rank,
-  onPress
-}) {
-  const badge = badgeFor(row.api);
-  const Wrapper = onPress ? _reactNative.TouchableOpacity : _reactNative.View;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    style: rowStyles.row,
-    ...(onPress ? {
-      onPress: () => onPress(row),
-      activeOpacity: 0.6
-    } : {}),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: rowStyles.topLine,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: rowStyles.rank,
-        children: rank
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [rowStyles.badge, {
-          borderColor: badge.color,
-          backgroundColor: `${badge.color}1A`
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [rowStyles.badgeText, {
-            color: badge.color
-          }],
-          children: badge.text
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: rowStyles.name,
-        numberOfLines: 1,
-        children: displayName(row)
-      }), row.freezes > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [rowStyles.freezeBadge, row.worstFreezeMs >= 100 && rowStyles.freezeBadgeSevere],
-        children: ["\u26A0 \xD7", row.freezes]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [rowStyles.windowMs, row.api !== "unattributed" && row.pctOfBusy >= 25 && {
-          color: row.pctOfBusy >= 50 ? _sharedUi.macOSColors.semantic.error : _sharedUi.macOSColors.semantic.warning
-        }],
-        children: [fmt(row.windowMs), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: rowStyles.unit,
-          children: " ms"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-        style: [rowStyles.pct, row.api === "unattributed" && rowStyles.pctMuted],
-        children: [Math.round(row.pctOfBusy), "%"]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: rowStyles.subLine,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: rowStyles.barTrack,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [rowStyles.barFill, {
-            width: `${Math.min(100, row.pctOfBusy)}%`,
-            backgroundColor: badge.color
-          }]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: rowStyles.stats,
-        numberOfLines: 1,
-        children: statsLine(row)
-      })]
-    })]
-  });
-}, (prev, next) => prev.rank === next.rank && prev.onPress === next.onPress && prev.row.key === next.row.key && prev.row.windowMs === next.row.windowMs && prev.row.calls === next.row.calls && prev.row.maxMs === next.row.maxMs && prev.row.totalMs === next.row.totalMs && prev.row.pctOfBusy === next.row.pctOfBusy && prev.row.freezes === next.row.freezes && prev.row.worstFreezeMs === next.row.worstFreezeMs);
-function TaskTable({
-  rows,
-  onSelectRow
-}) {
-  const [sortKey, setSortKey] = (0, _react.useState)("windowMs");
-  const sorted = sortKey === "windowMs" ? rows : [...rows].sort((a, b) => b[sortKey] - a[sortKey]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.root,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.sortRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sortLabel,
-        children: "SORT"
-      }), SORT_OPTIONS.map(o => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: () => setSortKey(o.key),
-        style: [styles.sortChip, sortKey === o.key && styles.sortChipOn],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.sortChipText, sortKey === o.key && styles.sortChipTextOn],
-          children: o.title
-        })
-      }, o.key))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      style: styles.body,
-      children: [sorted.map((row, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TaskRow, {
-        row: row,
-        rank: i + 1,
-        onPress: onSelectRow
-      }, row.key)), sorted.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.empty,
-        children: "No tasks observed yet \u2014 interact with the app."
-      })]
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  root: {
-    flex: 1,
-    minHeight: 0
-  },
-  sortRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.night.color.border,
-    backgroundColor: _sharedUi.night.color.surface
-  },
-  sortLabel: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    marginRight: 2
-  },
-  sortChip: {
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    borderRadius: 4,
-    paddingHorizontal: 7,
-    paddingVertical: 3
-  },
-  sortChipOn: {
-    borderColor: _sharedUi.night.color.accentBorderStrong,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  sortChipText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "600",
-    fontVariant: ["tabular-nums"]
-  },
-  sortChipTextOn: {
-    color: _sharedUi.night.color.accent
-  },
-  body: {
-    flex: 1
-  },
-  empty: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    paddingVertical: 24
-  }
-});
-const rowStyles = _reactNative.StyleSheet.create({
-  row: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderBottomColor: _sharedUi.night.color.border,
-    gap: 5
-  },
-  topLine: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  rank: {
-    width: 16,
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"]
-  },
-  badge: {
-    borderWidth: 1,
-    borderRadius: 3,
-    paddingHorizontal: 4,
-    paddingVertical: 1
-  },
-  badgeText: {
-    fontSize: 8,
-    fontWeight: "700",
-    letterSpacing: 0.4
-  },
-  name: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    fontWeight: "500"
-  },
-  freezeBadge: {
-    color: _sharedUi.macOSColors.semantic.warning,
-    fontSize: 10,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"]
-  },
-  freezeBadgeSevere: {
-    color: _sharedUi.macOSColors.semantic.error
-  },
-  windowMs: {
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"]
-  },
-  unit: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 10,
-    fontWeight: "400"
-  },
-  pct: {
-    width: 38,
-    textAlign: "right",
-    color: _sharedUi.night.color.textSecondary,
-    fontSize: 12,
-    fontWeight: "600",
-    fontVariant: ["tabular-nums"]
-  },
-  pctMuted: {
-    color: _sharedUi.night.color.textTertiary
-  },
-  subLine: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingLeft: 22
-  },
-  barTrack: {
-    width: 72,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: _sharedUi.night.color.fillSecondary,
-    overflow: "hidden"
-  },
-  barFill: {
-    height: 4,
-    borderRadius: 2,
-    opacity: 0.85
-  },
-  stats: {
-    flex: 1,
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"]
-  }
-});
-//# sourceMappingURL=TaskTable.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.API_BADGE=void 0;exports.TaskTable=TaskTable;exports.badgeFor=badgeFor;exports.displayName=displayName;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const SORT_OPTIONS=[{key:"windowMs",title:"RECENT"},{key:"calls",title:"CALLS"},{key:"avgMs",title:"AVG"},{key:"maxMs",title:"MAX"},{key:"totalMs",title:"TOTAL"}];const API_BADGE=exports.API_BADGE={timeout:{text:"TIMEOUT",color:"#38BDF8",prefix:"setTimeout"},interval:{text:"INTERVAL",color:"#22D3EE",prefix:"setInterval"},immediate:{text:"IMMED",color:"#60A5FA",prefix:"setImmediate"},raf:{text:"RAF",color:"#34D399",prefix:"requestAnimationFrame"},microtask:{text:"MICRO",color:"#A78BFA",prefix:"queueMicrotask"},then:{text:"PROMISE",color:"#BF5AF2",prefix:"Promise.then"},bridge:{text:"BRIDGE",color:"#FBBF24",prefix:"bridge"},unattributed:{text:"SYSTEM",color:"#8E8E93"},other:{text:"OTHER",color:"#8E8E93",prefix:"other"}};function badgeFor(e){return API_BADGE[e]??API_BADGE.other}function displayName(e){if(e.api==="unattributed")return"events \xB7 React \xB7 native call-ins";if(e.api==="other")return"evicted cold origins";const t=badgeFor(e.api).prefix;let r=e.label;if(t&&r.startsWith(t))r=r.slice(t.length);r=r.replace(/^[\s←@]+/,"").trim();return r.length>0?r:"anonymous"}function fmt(e){if(e>=1e4)return`${Math.round(e/1e3)}k`;if(e>=1e3)return`${(e/1e3).toFixed(1)}k`;if(e>=100)return`${Math.round(e)}`;return`${Math.round(e*10)/10}`}function statsLine(e){if(e.calls<=0)return"measured by probe \xB7 not reachable from JS";return`${fmt(e.calls)} calls \xB7 avg ${fmt(e.avgMs)} \xB7 max ${fmt(e.maxMs)} \xB7 total ${fmt(e.totalMs)} ms`}const TaskRow=(0,_react.memo)(function e({row:t,rank:r,onPress:a}){const i=badgeFor(t.api);const o=a?_reactNative.TouchableOpacity:_reactNative.View;return(0,_jsxRuntime.jsxs)(o,{style:rowStyles.row,...a?{onPress:()=>a(t),activeOpacity:.6}:{},children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:rowStyles.topLine,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:rowStyles.rank,children:r}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[rowStyles.badge,{borderColor:i.color,backgroundColor:`${i.color}1A`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[rowStyles.badgeText,{color:i.color}],children:i.text})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:rowStyles.name,numberOfLines:1,children:displayName(t)}),t.freezes>0&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[rowStyles.freezeBadge,t.worstFreezeMs>=100&&rowStyles.freezeBadgeSevere],children:["\u26A0 \xD7",t.freezes]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[rowStyles.windowMs,t.api!=="unattributed"&&t.pctOfBusy>=25&&{color:t.pctOfBusy>=50?_sharedUi.macOSColors.semantic.error:_sharedUi.macOSColors.semantic.warning}],children:[fmt(t.windowMs),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:rowStyles.unit,children:" ms"})]}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[rowStyles.pct,t.api==="unattributed"&&rowStyles.pctMuted],children:[Math.round(t.pctOfBusy),"%"]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:rowStyles.subLine,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:rowStyles.barTrack,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[rowStyles.barFill,{width:`${Math.min(100,t.pctOfBusy)}%`,backgroundColor:i.color}]})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:rowStyles.stats,numberOfLines:1,children:statsLine(t)})]})]})},(e,t)=>e.rank===t.rank&&e.onPress===t.onPress&&e.row.key===t.row.key&&e.row.windowMs===t.row.windowMs&&e.row.calls===t.row.calls&&e.row.maxMs===t.row.maxMs&&e.row.totalMs===t.row.totalMs&&e.row.pctOfBusy===t.row.pctOfBusy&&e.row.freezes===t.row.freezes&&e.row.worstFreezeMs===t.row.worstFreezeMs);function TaskTable({rows:e,onSelectRow:t}){const[r,a]=(0,_react.useState)("windowMs");const i=r==="windowMs"?e:[...e].sort((o,n)=>n[r]-o[r]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.root,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sortRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sortLabel,children:"SORT"}),SORT_OPTIONS.map(o=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>a(o.key),style:[styles.sortChip,r===o.key&&styles.sortChipOn],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.sortChipText,r===o.key&&styles.sortChipTextOn],children:o.title})},o.key))]}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.body,children:[i.map((o,n)=>(0,_jsxRuntime.jsx)(TaskRow,{row:o,rank:n+1,onPress:t},o.key)),i.length===0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.empty,children:"No tasks observed yet \u2014 interact with the app."})]})]})}const styles=_reactNative.StyleSheet.create({root:{flex:1,minHeight:0},sortRow:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.border,backgroundColor:_sharedUi.night.color.surface},sortLabel:{color:_sharedUi.night.color.textTertiary,fontSize:9,fontWeight:"700",letterSpacing:.5,marginRight:2},sortChip:{borderWidth:1,borderColor:_sharedUi.night.color.border,borderRadius:4,paddingHorizontal:7,paddingVertical:3},sortChipOn:{borderColor:_sharedUi.night.color.accentBorderStrong,backgroundColor:_sharedUi.night.color.accentSoft},sortChipText:{color:_sharedUi.night.color.textTertiary,fontSize:9,fontWeight:"600",fontVariant:["tabular-nums"]},sortChipTextOn:{color:_sharedUi.night.color.accent},body:{flex:1},empty:{color:_sharedUi.night.color.textTertiary,fontSize:12,textAlign:"center",paddingVertical:24}});const rowStyles=_reactNative.StyleSheet.create({row:{paddingHorizontal:10,paddingVertical:8,borderBottomWidth:_reactNative.StyleSheet.hairlineWidth,borderBottomColor:_sharedUi.night.color.border,gap:5},topLine:{flexDirection:"row",alignItems:"center",gap:6},rank:{width:16,color:_sharedUi.night.color.textTertiary,fontSize:10,fontVariant:["tabular-nums"]},badge:{borderWidth:1,borderRadius:3,paddingHorizontal:4,paddingVertical:1},badgeText:{fontSize:8,fontWeight:"700",letterSpacing:.4},name:{flex:1,color:_sharedUi.night.color.text,fontSize:13,fontWeight:"500"},freezeBadge:{color:_sharedUi.macOSColors.semantic.warning,fontSize:10,fontWeight:"700",fontVariant:["tabular-nums"]},freezeBadgeSevere:{color:_sharedUi.macOSColors.semantic.error},windowMs:{color:_sharedUi.night.color.text,fontSize:13,fontWeight:"700",fontVariant:["tabular-nums"]},unit:{color:_sharedUi.night.color.textTertiary,fontSize:10,fontWeight:"400"},pct:{width:38,textAlign:"right",color:_sharedUi.night.color.textSecondary,fontSize:12,fontWeight:"600",fontVariant:["tabular-nums"]},pctMuted:{color:_sharedUi.night.color.textTertiary},subLine:{flexDirection:"row",alignItems:"center",gap:8,paddingLeft:22},barTrack:{width:72,height:4,borderRadius:2,backgroundColor:_sharedUi.night.color.fillSecondary,overflow:"hidden"},barFill:{height:4,borderRadius:2,opacity:.85},stats:{flex:1,color:_sharedUi.night.color.textTertiary,fontSize:10,fontVariant:["tabular-nums"]}});