@buoy-gg/console 7.0.40 → 7.0.42

package/lib/module/devtools/ConsoleHeader.js

@@ -1,109 +1 @@
-"use strict";
-
-/**
- * ConsoleHeader — the Console tool's header, built from the shared ModalHeader
- * pattern so it matches Network/Events 1:1. Controls live here: the
- * Timeline/Grouped TabSelector (or the search field when active), plus action
- * icons for search, level filter, clear, and settings. Tapping the level/filter
- * or settings icon swaps the body to a back-navigable sub-view.
- */
-
-import React from "react";
-import { TouchableOpacity, StyleSheet } from "react-native";
-import { ModalHeader, TabSelector, night, Search, Filter, Trash2 } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const LAYOUT_TABS = [{
-  key: "chrono",
-  label: "Timeline"
-}, {
-  key: "cluster",
-  label: "Grouped"
-}];
-export function ConsoleHeader({
-  c,
-  onBack
-}) {
-  // Filters sub-view: a back chevron returns to the list.
-  if (c.view === "filters") {
-    return /*#__PURE__*/_jsxs(ModalHeader, {
-      children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-        onBack: () => c.setView("list")
-      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-        title: "Filters"
-      })]
-    });
-  }
-  const hasRows = c.rows.length > 0;
-  return /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [onBack ? /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }) : null, /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: c.searchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
-        value: c.query,
-        onChangeText: c.setQuery
-        // The ✕ only clears; submit is what closes the field.
-        ,
-        onCancel: () => c.setQuery(""),
-        clearOnlyWhenText: true,
-        placeholder: "Filter logs\u2026  /regex/  -exclude",
-        iconSize: 14,
-        inputProps: {
-          onSubmitEditing: () => c.setSearchActive(false)
-        }
-      }) : /*#__PURE__*/_jsx(TabSelector, {
-        tabs: LAYOUT_TABS,
-        activeTab: c.layoutMode,
-        onTabChange: key => c.setLayoutMode(key)
-      })
-    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => c.setSearchActive(a => !a),
-        style: [styles.actionBtn, c.searchActive && styles.actionBtnActive],
-        accessibilityLabel: "Search logs",
-        children: /*#__PURE__*/_jsx(Search, {
-          size: 14,
-          color: c.searchActive ? night.color.accent : night.color.textSecondary
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => c.setView("filters"),
-        style: [styles.actionBtn, c.isLevelCustom && styles.actionBtnActive],
-        accessibilityLabel: "Filters",
-        children: /*#__PURE__*/_jsx(Filter, {
-          size: 14,
-          color: c.isLevelCustom ? night.color.accent : night.color.textSecondary
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: c.clear,
-        disabled: !hasRows,
-        style: [styles.actionBtn, !hasRows && styles.actionBtnDisabled],
-        accessibilityLabel: "Clear console",
-        children: /*#__PURE__*/_jsx(Trash2, {
-          size: 14,
-          color: hasRows ? night.color.textSecondary : night.color.textTertiary
-        })
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  actionBtn: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  actionBtnActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  actionBtnDisabled: {
-    opacity: 0.55
-  }
-});
-//# sourceMappingURL=ConsoleHeader.js.map
+"use strict";import v from"react";import{TouchableOpacity as a,StyleSheet as d}from"react-native";import{ModalHeader as r,TabSelector as h,night as o,Search as u,Filter as b,Trash2 as y}from"@buoy-gg/shared-ui";import{jsx as t,jsxs as c}from"react/jsx-runtime";const S=[{key:"chrono",label:"Timeline"},{key:"cluster",label:"Grouped"}];export function ConsoleHeader({c:e,onBack:s}){if(e.view==="filters"){return c(r,{children:[t(r.Navigation,{onBack:()=>e.setView("list")}),t(r.Content,{title:"Filters"})]})}const n=e.rows.length>0;return c(r,{children:[s?t(r.Navigation,{onBack:s}):null,t(r.Content,{title:"",noMargin:true,children:e.searchActive?t(r.Search,{value:e.query,onChangeText:e.setQuery,onCancel:()=>e.setQuery(""),clearOnlyWhenText:true,placeholder:"Filter logs\u2026  /regex/  -exclude",iconSize:14,inputProps:{onSubmitEditing:()=>e.setSearchActive(false)}}):t(h,{tabs:S,activeTab:e.layoutMode,onTabChange:l=>e.setLayoutMode(l)})}),c(r.Actions,{children:[t(a,{onPress:()=>e.setSearchActive(l=>!l),style:[i.actionBtn,e.searchActive&&i.actionBtnActive],accessibilityLabel:"Search logs",children:t(u,{size:14,color:e.searchActive?o.color.accent:o.color.textSecondary})}),t(a,{onPress:()=>e.setView("filters"),style:[i.actionBtn,e.isLevelCustom&&i.actionBtnActive],accessibilityLabel:"Filters",children:t(b,{size:14,color:e.isLevelCustom?o.color.accent:o.color.textSecondary})}),t(a,{onPress:e.clear,disabled:!n,style:[i.actionBtn,!n&&i.actionBtnDisabled],accessibilityLabel:"Clear console",children:t(y,{size:14,color:n?o.color.textSecondary:o.color.textTertiary})})]})]})}const i=d.create({actionBtn:{width:32,height:32,borderRadius:8,backgroundColor:o.color.buttonSurface,borderWidth:1,borderColor:o.color.border,alignItems:"center",justifyContent:"center"},actionBtnActive:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong},actionBtnDisabled:{opacity:.55}});

package/lib/module/devtools/ConsoleMessageRow.js

@@ -1,352 +1 @@
-"use strict";
-
-import { memo } from "react";
-/**
- * ConsoleMessageRow — RN port of a single DevTools `.console-message-wrapper`.
- *
- * Anatomy (mirrors ConsoleViewMessage):
- *   [nesting markers] [group triangle] [level icon] [timestamp] [content] [repeat badge]
- * Error/warning rows get the surface background + text colors; non-error/warning
- * rows get a hairline top divider. Group headers show a bold title with an
- * expand triangle; error/warn/trace rows can expand a captured stack trace.
- */
-
-import React, { useState } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { consoleTheme, levelStyles, monoFont } from "./theme";
-import { formatConsoleMessage } from "./consoleFormat";
-import { ConsoleValue } from "./ConsoleValue";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function formatTimestamp(ts) {
-  const d = new Date(ts);
-  const pad = (n, len = 2) => String(n).padStart(len, "0");
-  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
-}
-
-/** Small filled level glyph (warning triangle / error cross), DevTools-style. */
-function LevelIcon({
-  icon,
-  color
-}) {
-  return /*#__PURE__*/_jsx(Text, {
-    style: [styles.levelIcon, {
-      color
-    }],
-    children: icon === "warning" ? "⚠" : "⊘"
-  });
-}
-
-/** The repeat-count bubble (dt-small-bubble). */
-function RepeatBadge({
-  count,
-  color
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.repeatBadge, {
-      borderColor: color
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.repeatBadgeText, {
-        color
-      }],
-      children: count
-    })
-  });
-}
-// Memo with a precise comparator, justified by profiling (tool-bench
-// 2026-07-06): ~30 windowed rows re-rendered on every commit (172 row
-// renders in a 5s dwell) because buildDisplayRows recreates row OBJECTS
-// each emission — so default shallow compare can never bail. Entries are
-// immutable; the comparator lists every display-affecting row field.
-export const ConsoleMessageRow = /*#__PURE__*/memo(function ConsoleMessageRow({
-  row,
-  showTimestamps,
-  onToggleGroup,
-  onToggleCluster
-}) {
-  const {
-    entry
-  } = row;
-  const level = levelStyles[entry.level];
-  const isErrorOrWarn = entry.level === "error" || entry.level === "warning";
-  const textColor = level.text;
-  // One "open" state per row: shows the stack trace (when there is one) AND
-  // lifts the single-line clamp so long/structured messages stay reachable.
-  const [expanded, setExpanded] = useState(entry.method === "trace");
-
-  // Collapsed/large cluster header (Grouped mode): tap to expand/collapse.
-  if (row.clusterHeader) {
-    const ch = row.clusterHeader;
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.wrapper, styles.dividerTop],
-      activeOpacity: 0.7,
-      onPress: () => onToggleCluster(ch.key),
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.rowWrapper,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.originGutter, {
-            color: row.originColor
-          }],
-          children: ch.expanded ? "▼" : "▶"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.messageColumn,
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.messageLine,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.text, styles.clusterTitle, {
-                color: row.originColor
-              }],
-              children: row.originLabel
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.clusterCount,
-              children: [" \xB7 ", ch.count, " logs"]
-            })]
-          })
-        })]
-      })
-    });
-  }
-  const tokens = formatConsoleMessage(entry.args);
-  const hasStack = Boolean(entry.stack) && (isErrorOrWarn || entry.method === "trace");
-  const content = /*#__PURE__*/_jsx(View, {
-    style: [styles.contentWrap, !expanded && styles.contentWrapClamped],
-    children: tokens.map((token, i) => token.type === "string" ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: textColor
-      }, row.isGroupHeader && styles.groupTitle, token.style],
-      children: token.value
-    }, i) : /*#__PURE__*/_jsx(ConsoleValue, {
-      value: token.value,
-      generic: token.mode === "generic"
-    }, i))
-  });
-  const inner = /*#__PURE__*/_jsxs(View, {
-    style: styles.messageColumn,
-    children: [row.originLabel ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.originLabel, {
-        color: row.originColor
-      }],
-      numberOfLines: 1,
-      children: row.originLabel
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: styles.messageLine,
-      children: [row.isGroupHeader ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.groupTriangle, {
-          color: textColor
-        }],
-        children: row.groupCollapsed ? "▶" : "▼"
-      }) : null, level.icon ? /*#__PURE__*/_jsx(LevelIcon, {
-        icon: level.icon,
-        color: textColor
-      }) : null, showTimestamps ? /*#__PURE__*/_jsx(Text, {
-        style: styles.timestamp,
-        children: formatTimestamp(entry.timestamp)
-      }) : null, hasStack ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.stackTriangle, {
-          color: textColor
-        }],
-        children: expanded ? "▼" : "▶"
-      }) : null, content, row.repeatCount > 1 ? /*#__PURE__*/_jsx(RepeatBadge, {
-        count: row.repeatCount,
-        color: textColor
-      }) : null]
-    }), hasStack && expanded ? /*#__PURE__*/_jsx(View, {
-      style: styles.stackTrace,
-      children: (entry.stack ?? "").split("\n").filter(l => l.trim()).map((line, i) => /*#__PURE__*/_jsx(Text, {
-        style: styles.stackFrame,
-        children: line.trim()
-      }, i))
-    }) : null]
-  });
-  const rowStyle = [styles.wrapper, level.background ? {
-    backgroundColor: level.background
-  } : styles.dividerTop];
-
-  // Nesting indentation markers.
-  const markers = Array.from({
-    length: row.depth
-  }, (_, i) => /*#__PURE__*/_jsx(View, {
-    style: styles.nestingMarker
-  }, i));
-
-  // Origin gutter: swimlane columns (multi-track) or a single bracket.
-  const gutter = row.lanes ? /*#__PURE__*/_jsx(View, {
-    style: styles.laneGutter,
-    children: row.lanes.map((cell, i) => /*#__PURE__*/_jsx(Text, {
-      style: [styles.laneCell, cell.color ? {
-        color: cell.color
-      } : null],
-      children: cell.glyph
-    }, i))
-  }) : row.bracketGlyph ? /*#__PURE__*/_jsx(Text, {
-    style: [styles.originGutter, {
-      color: row.originColor
-    }],
-    children: row.bracketGlyph
-  }) : null;
-  const body = /*#__PURE__*/_jsxs(View, {
-    style: styles.rowWrapper,
-    children: [gutter, markers, inner]
-  });
-  const rowTestID = `buoy-console-row-${entry.id}`;
-  const rowLabel = [row.originLabel, tokens.find(t => t.type === "string")?.value].filter(Boolean).join(" — ").slice(0, 80);
-
-  // Group headers and stack-bearing rows are pressable.
-  if (row.isGroupHeader && row.groupId !== undefined) {
-    const gid = row.groupId;
-    return /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: rowStyle,
-      activeOpacity: 0.7,
-      onPress: () => onToggleGroup(gid, Boolean(row.groupCollapsed)),
-      testID: rowTestID,
-      accessibilityLabel: rowLabel || "Console group",
-      children: body
-    });
-  }
-  // Every other row toggles expanded on tap — the collapsed line is clamped
-  // to a single line, so the tap is the way to read a long/structured log.
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    style: rowStyle,
-    activeOpacity: 0.7,
-    onPress: () => setExpanded(o => !o),
-    testID: rowTestID,
-    accessibilityLabel: rowLabel || "Console message",
-    children: body
-  });
-}, (prev, next) => prev.row.key === next.row.key &&
-// Reference check: swimlane gutter cells are rebuilt per emission, so
-// swimlane mode simply keeps its previous (correct) behavior.
-prev.row.lanes === next.row.lanes && prev.row.repeatCount === next.row.repeatCount && prev.row.groupCollapsed === next.row.groupCollapsed && prev.row.depth === next.row.depth && prev.row.bracketGlyph === next.row.bracketGlyph && prev.row.originLabel === next.row.originLabel && prev.row.clusterHeader?.count === next.row.clusterHeader?.count && prev.row.clusterHeader?.expanded === next.row.clusterHeader?.expanded && prev.showTimestamps === next.showTimestamps && prev.onToggleGroup === next.onToggleGroup && prev.onToggleCluster === next.onToggleCluster);
-const styles = StyleSheet.create({
-  wrapper: {
-    paddingVertical: 2,
-    paddingRight: 8,
-    minHeight: 18
-  },
-  dividerTop: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: consoleTheme.divider
-  },
-  rowWrapper: {
-    flexDirection: "row",
-    alignItems: "flex-start"
-  },
-  originGutter: {
-    width: 11,
-    fontFamily: monoFont,
-    fontSize: 13,
-    lineHeight: 18,
-    textAlign: "center"
-  },
-  laneGutter: {
-    flexDirection: "row"
-  },
-  laneCell: {
-    width: 9,
-    fontFamily: monoFont,
-    fontSize: 13,
-    lineHeight: 18,
-    textAlign: "center"
-  },
-  originLabel: {
-    fontFamily: monoFont,
-    fontSize: 10,
-    lineHeight: 16,
-    marginBottom: 1,
-    opacity: 0.9
-  },
-  nestingMarker: {
-    width: 14,
-    alignSelf: "stretch",
-    borderRightWidth: StyleSheet.hairlineWidth,
-    borderRightColor: consoleTheme.divider,
-    marginLeft: 2
-  },
-  messageColumn: {
-    flex: 1,
-    flexDirection: "column",
-    paddingLeft: 6
-  },
-  messageLine: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "flex-start"
-  },
-  contentWrap: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    flexShrink: 1
-  },
-  // Collapsed rows clamp to one line; tap the row to expand.
-  contentWrapClamped: {
-    flexWrap: "nowrap",
-    overflow: "hidden",
-    maxHeight: 16
-  },
-  text: {
-    fontFamily: monoFont,
-    fontSize: 12,
-    lineHeight: 16
-  },
-  groupTitle: {
-    fontWeight: "bold"
-  },
-  clusterTitle: {
-    fontWeight: "600"
-  },
-  clusterCount: {
-    color: consoleTheme.tokenSubtle,
-    fontFamily: monoFont,
-    fontSize: 12,
-    lineHeight: 16
-  },
-  groupTriangle: {
-    fontSize: 9,
-    lineHeight: 16,
-    marginRight: 4
-  },
-  stackTriangle: {
-    fontSize: 8,
-    lineHeight: 16,
-    marginRight: 4
-  },
-  levelIcon: {
-    fontSize: 12,
-    lineHeight: 16,
-    marginRight: 5
-  },
-  timestamp: {
-    color: consoleTheme.tokenSubtle,
-    fontFamily: monoFont,
-    fontSize: 11,
-    lineHeight: 16,
-    marginRight: 6
-  },
-  repeatBadge: {
-    borderWidth: 1,
-    borderRadius: 9,
-    paddingHorizontal: 5,
-    minWidth: 16,
-    alignItems: "center",
-    justifyContent: "center",
-    marginLeft: 6,
-    marginTop: 1
-  },
-  repeatBadgeText: {
-    fontSize: 10,
-    fontWeight: "700",
-    lineHeight: 14
-  },
-  stackTrace: {
-    marginTop: 2,
-    marginLeft: 12
-  },
-  stackFrame: {
-    color: consoleTheme.tokenSubtle,
-    fontFamily: monoFont,
-    fontSize: 11,
-    lineHeight: 15
-  }
-});
-//# sourceMappingURL=ConsoleMessageRow.js.map
+"use strict";import{memo as v}from"react";import V,{useState as B}from"react";import{View as i,Text as n,TouchableOpacity as b,StyleSheet as C}from"react-native";import{consoleTheme as m,levelStyles as F,monoFont as c}from"./theme";import{formatConsoleMessage as D}from"./consoleFormat";import{ConsoleValue as M}from"./ConsoleValue";import{jsx as o,jsxs as d}from"react/jsx-runtime";function j(l){const e=new Date(l);const g=(h,f=2)=>String(h).padStart(f,"0");return`${g(e.getHours())}:${g(e.getMinutes())}:${g(e.getSeconds())}.${g(e.getMilliseconds(),3)}`}function O({icon:l,color:e}){return o(n,{style:[t.levelIcon,{color:e}],children:l==="warning"?"\u26A0":"\u2298"})}function $({count:l,color:e}){return o(i,{style:[t.repeatBadge,{borderColor:e}],children:o(n,{style:[t.repeatBadgeText,{color:e}],children:l})})}export const ConsoleMessageRow=v(function l({row:e,showTimestamps:g,onToggleGroup:h,onToggleCluster:f}){const{entry:a}=e;const p=F[a.level];const L=a.level==="error"||a.level==="warning";const u=p.text;const[y,W]=B(a.method==="trace");if(e.clusterHeader){const r=e.clusterHeader;return o(b,{style:[t.wrapper,t.dividerTop],activeOpacity:.7,onPress:()=>f(r.key),children:d(i,{style:t.rowWrapper,children:[o(n,{style:[t.originGutter,{color:e.originColor}],children:r.expanded?"\u25BC":"\u25B6"}),o(i,{style:t.messageColumn,children:d(i,{style:t.messageLine,children:[o(n,{style:[t.text,t.clusterTitle,{color:e.originColor}],children:e.originLabel}),d(n,{style:t.clusterCount,children:[" \xB7 ",r.count," logs"]})]})})]})})}const T=D(a.args);const S=Boolean(a.stack)&&(L||a.method==="trace");const G=o(i,{style:[t.contentWrap,!y&&t.contentWrapClamped],children:T.map((r,s)=>r.type==="string"?o(n,{style:[t.text,{color:u},e.isGroupHeader&&t.groupTitle,r.style],children:r.value},s):o(M,{value:r.value,generic:r.mode==="generic"},s))});const z=d(i,{style:t.messageColumn,children:[e.originLabel?o(n,{style:[t.originLabel,{color:e.originColor}],numberOfLines:1,children:e.originLabel}):null,d(i,{style:t.messageLine,children:[e.isGroupHeader?o(n,{style:[t.groupTriangle,{color:u}],children:e.groupCollapsed?"\u25B6":"\u25BC"}):null,p.icon?o(O,{icon:p.icon,color:u}):null,g?o(n,{style:t.timestamp,children:j(a.timestamp)}):null,S?o(n,{style:[t.stackTriangle,{color:u}],children:y?"\u25BC":"\u25B6"}):null,G,e.repeatCount>1?o($,{count:e.repeatCount,color:u}):null]}),S&&y?o(i,{style:t.stackTrace,children:(a.stack??"").split("\n").filter(r=>r.trim()).map((r,s)=>o(n,{style:t.stackFrame,children:r.trim()},s))}):null]});const x=[t.wrapper,p.background?{backgroundColor:p.background}:t.dividerTop];const I=Array.from({length:e.depth},(r,s)=>o(i,{style:t.nestingMarker},s));const R=e.lanes?o(i,{style:t.laneGutter,children:e.lanes.map((r,s)=>o(n,{style:[t.laneCell,r.color?{color:r.color}:null],children:r.glyph},s))}):e.bracketGlyph?o(n,{style:[t.originGutter,{color:e.originColor}],children:e.bracketGlyph}):null;const H=d(i,{style:t.rowWrapper,children:[R,I,z]});const k=`buoy-console-row-${a.id}`;const w=[e.originLabel,T.find(r=>r.type==="string")?.value].filter(Boolean).join(" \u2014 ").slice(0,80);if(e.isGroupHeader&&e.groupId!==void 0){const r=e.groupId;return o(b,{style:x,activeOpacity:.7,onPress:()=>h(r,Boolean(e.groupCollapsed)),testID:k,accessibilityLabel:w||"Console group",children:H})}return o(b,{style:x,activeOpacity:.7,onPress:()=>W(r=>!r),testID:k,accessibilityLabel:w||"Console message",children:H})},(l,e)=>l.row.key===e.row.key&&l.row.lanes===e.row.lanes&&l.row.repeatCount===e.row.repeatCount&&l.row.groupCollapsed===e.row.groupCollapsed&&l.row.depth===e.row.depth&&l.row.bracketGlyph===e.row.bracketGlyph&&l.row.originLabel===e.row.originLabel&&l.row.clusterHeader?.count===e.row.clusterHeader?.count&&l.row.clusterHeader?.expanded===e.row.clusterHeader?.expanded&&l.showTimestamps===e.showTimestamps&&l.onToggleGroup===e.onToggleGroup&&l.onToggleCluster===e.onToggleCluster);const t=C.create({wrapper:{paddingVertical:2,paddingRight:8,minHeight:18},dividerTop:{borderTopWidth:C.hairlineWidth,borderTopColor:m.divider},rowWrapper:{flexDirection:"row",alignItems:"flex-start"},originGutter:{width:11,fontFamily:c,fontSize:13,lineHeight:18,textAlign:"center"},laneGutter:{flexDirection:"row"},laneCell:{width:9,fontFamily:c,fontSize:13,lineHeight:18,textAlign:"center"},originLabel:{fontFamily:c,fontSize:10,lineHeight:16,marginBottom:1,opacity:.9},nestingMarker:{width:14,alignSelf:"stretch",borderRightWidth:C.hairlineWidth,borderRightColor:m.divider,marginLeft:2},messageColumn:{flex:1,flexDirection:"column",paddingLeft:6},messageLine:{flexDirection:"row",flexWrap:"wrap",alignItems:"flex-start"},contentWrap:{flexDirection:"row",flexWrap:"wrap",alignItems:"flex-start",flexShrink:1},contentWrapClamped:{flexWrap:"nowrap",overflow:"hidden",maxHeight:16},text:{fontFamily:c,fontSize:12,lineHeight:16},groupTitle:{fontWeight:"bold"},clusterTitle:{fontWeight:"600"},clusterCount:{color:m.tokenSubtle,fontFamily:c,fontSize:12,lineHeight:16},groupTriangle:{fontSize:9,lineHeight:16,marginRight:4},stackTriangle:{fontSize:8,lineHeight:16,marginRight:4},levelIcon:{fontSize:12,lineHeight:16,marginRight:5},timestamp:{color:m.tokenSubtle,fontFamily:c,fontSize:11,lineHeight:16,marginRight:6},repeatBadge:{borderWidth:1,borderRadius:9,paddingHorizontal:5,minWidth:16,alignItems:"center",justifyContent:"center",marginLeft:6,marginTop:1},repeatBadgeText:{fontSize:10,fontWeight:"700",lineHeight:14},stackTrace:{marginTop:2,marginLeft:12},stackFrame:{color:m.tokenSubtle,fontFamily:c,fontSize:11,lineHeight:15}});