@buoy-gg/js-top 7.0.41 → 7.0.43

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

@@ -1,349 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JsTopModal = JsTopModal;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _JsTopController = require("../engine/JsTopController");
-var _BusySparkline = require("./BusySparkline");
-var _TaskTable = require("./TaskTable");
-var _TaskDetailView = require("./TaskDetailView");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * JS TOP modal — the Task Manager window.
- *
- * Layout: header (busy% pill + pause/clear controls) → busy sparkline →
- * coverage banner (when bridge tier is unavailable) → ranked task table →
- * blocking-task list.
- *
- * Data source is the local JsTopController by default. The desktop
- * dashboard mounts this same component via react-native-web and injects the
- * synced device snapshot + remote actions through `remoteSnapshot` /
- * `remoteActions` — the modal never samples the Electron renderer.
- */
-
-function busyColor(pct) {
-  if (pct >= 80) return _sharedUi.macOSColors.semantic.error;
-  if (pct >= 40) return _sharedUi.macOSColors.semantic.warning;
-  return _sharedUi.macOSColors.semantic.success;
-}
-
-/** ≥100ms is a dropped-tap-level freeze — escalate to red. */
-function freezeColor(worstMs) {
-  return worstMs >= 100 ? _sharedUi.macOSColors.semantic.error : _sharedUi.macOSColors.semantic.warning;
-}
-
-/**
- * The one-line answer to "what should I look at?" — rendered above the
- * table so triage never requires reading it. Priority: a named culprit >
- * freezes > saturated-by-UI-work > healthy.
- */
-function diagnose(s) {
-  const culprit = s.rows.find(r => r.api !== "unattributed" && r.api !== "other");
-  if (culprit && culprit.pctOfBusy >= 25 && s.busyPct >= 15) {
-    return {
-      color: culprit.pctOfBusy >= 50 ? _sharedUi.macOSColors.semantic.error : _sharedUi.macOSColors.semantic.warning,
-      icon: "▲",
-      text: `${culprit.label} is eating ${Math.round(culprit.pctOfBusy)}% of thread time — start there.`
-    };
-  }
-  if (s.freezeSummary.count > 0) {
-    return {
-      color: freezeColor(s.freezeSummary.worstMs),
-      icon: "▲",
-      text: `${s.freezeSummary.count} freeze${s.freezeSummary.count === 1 ? "" : "s"} in the last 60s (worst ${s.freezeSummary.worstMs}ms) — check rows marked ⚠.`
-    };
-  }
-  if (s.busyPct >= 80) {
-    return {
-      color: _sharedUi.macOSColors.semantic.warning,
-      icon: "▲",
-      text: "Thread saturated by UI/React work — open Highlight Updates to find re-renders."
-    };
-  }
-  return {
-    color: _sharedUi.macOSColors.semantic.success,
-    icon: "●",
-    text: `Thread healthy at ${Math.round(s.busyPct)}% load — nothing worth chasing.`
-  };
-}
-function JsTopModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  initialModalState,
-  minimizeTargetPosition,
-  remoteSnapshot,
-  remoteActions,
-  embedded = false
-}) {
-  const isRemote = remoteSnapshot !== undefined;
-  const [localSnapshot, setLocalSnapshot] = (0, _react.useState)(null);
-
-  // Local mode: subscribing is what starts the engine (and unsubscribing on
-  // close is what stops it — zero overhead when the window isn't open).
-  (0, _react.useEffect)(() => {
-    if (isRemote || !visible) return;
-    return _JsTopController.JsTopController.subscribe(setLocalSnapshot);
-  }, [isRemote, visible]);
-  const snapshot = isRemote ? remoteSnapshot : localSnapshot;
-  const actions = (0, _react.useMemo)(() => remoteActions ?? {
-    pause: () => _JsTopController.JsTopController.pause(),
-    resume: () => _JsTopController.JsTopController.resume(),
-    clear: () => _JsTopController.JsTopController.clear()
-  }, [remoteActions]);
-  const paused = snapshot?.paused ?? false;
-  const hasData = (snapshot?.rows.length ?? 0) > 0;
-
-  // Tap-through detail. Local mode re-pulls the detail on every snapshot
-  // tick (this component re-renders), so the detail view stays live.
-  // Remote mode (desktop) has no local engine — rows aren't tappable there.
-  const [detailKey, setDetailKey] = (0, _react.useState)(null);
-  const onSelectRow = (0, _react.useCallback)(row => setDetailKey(row.key), []);
-  const detail = !isRemote && detailKey ? _JsTopController.JsTopController.getOriginDetail(detailKey) : null;
-  const inDetail = detailKey !== null;
-
-  // Shared ModalHeader compound — same structure as Network/Events/Console:
-  // Content (brand icon + title + live busy pill) and 32px icon Actions.
-  // In the detail view the chevron pops back to the table.
-  const headerContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [inDetail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: () => setDetailKey(null)
-    }) : onBack ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: onBack
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.titleRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Activity, {
-          size: 14,
-          color: "#34D399"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.title,
-          children: "JS Top"
-        }), snapshot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.busyPill, {
-            borderColor: busyColor(snapshot.busyPct)
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: [styles.busyText, {
-              color: busyColor(snapshot.busyPct)
-            }],
-            children: [snapshot.busyPct.toFixed(0), "% BUSY"]
-          })
-        }), snapshot && snapshot.freezeSummary.count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.busyPill, {
-            borderColor: freezeColor(snapshot.freezeSummary.worstMs)
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-            style: [styles.busyText, {
-              color: freezeColor(snapshot.freezeSummary.worstMs)
-            }],
-            children: ["\u26A0 ", snapshot.freezeSummary.count, " \xB7", " ", snapshot.freezeSummary.worstMs, "ms"]
-          })
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: paused ? actions.resume : actions.pause,
-        style: [styles.actionBtn, paused && styles.actionBtnActive],
-        accessibilityLabel: paused ? "Resume sampling" : "Pause sampling",
-        children: paused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Play, {
-          size: 14,
-          color: _sharedUi.night.color.accent
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pause, {
-          size: 14,
-          color: _sharedUi.night.color.textSecondary
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: actions.clear,
-        disabled: !hasData,
-        style: [styles.actionBtn, !hasData && styles.actionBtnDisabled],
-        accessibilityLabel: "Clear stats",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-          size: 14,
-          color: hasData ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textTertiary
-        })
-      })]
-    })]
-  });
-  const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.body,
-    children: inDetail ? detail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TaskDetailView.TaskDetailView, {
-      detail: detail
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.waiting,
-      children: "This origin is no longer tracked (cleared or evicted)."
-    }) : snapshot ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [(() => {
-        const d = diagnose(snapshot);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.diagnosis, {
-            borderLeftColor: d.color
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.diagnosisIcon, {
-              color: d.color
-            }],
-            children: d.icon
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.diagnosisText,
-            children: d.text
-          })]
-        });
-      })(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.sparklineRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.sparklineCaption,
-          children: "JS THREAD LOAD \xB7 LAST 30s"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BusySparkline.BusySparkline, {
-          history: snapshot.busyHistory
-        })]
-      }), !snapshot.tiers.bridge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.tierBanner,
-        children: "\u201CSystem\u201D rows are UI/React/native work pure JS can\u2019t name \u2014 timers, rAF and Promise chains are fully attributed."
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TaskTable.TaskTable, {
-        rows: snapshot.rows,
-        onSelectRow: isRemote ? undefined : onSelectRow
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.waiting,
-      children: isRemote ? "Waiting for device…" : "Starting engine…"
-    })
-  });
-  if (embedded) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.embeddedRoot,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.embeddedHeader,
-        children: headerContent
-      }), body]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    minimizeTargetPosition: minimizeTargetPosition,
-    initialModalState: initialModalState,
-    header: {
-      showToggleButton: true,
-      customContent: headerContent
-    },
-    persistenceKey: "buoy-js-top-modal",
-    enablePersistence: true,
-    initialMode: "bottomSheet",
-    disableScrollWrapper: true,
-    children: body
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  titleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  title: {
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "500"
-  },
-  busyPill: {
-    borderWidth: 1,
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2
-  },
-  busyText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"]
-  },
-  actionBtn: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  actionBtnActive: {
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderColor: _sharedUi.night.color.accentBorderStrong
-  },
-  actionBtnDisabled: {
-    opacity: 0.55
-  },
-  body: {
-    flex: 1,
-    minHeight: 0,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints
-    // opaque base beneath it). The embedded path keeps `embeddedRoot`'s base fill.
-    backgroundColor: "transparent"
-  },
-  diagnosis: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginHorizontal: 10,
-    marginTop: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 6,
-    borderLeftWidth: 3
-  },
-  diagnosisIcon: {
-    fontSize: 11,
-    fontWeight: "700"
-  },
-  diagnosisText: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 12,
-    lineHeight: 16
-  },
-  sparklineRow: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    gap: 4
-  },
-  sparklineCaption: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 8,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  tierBanner: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 10,
-    paddingHorizontal: 10,
-    paddingBottom: 6
-  },
-  waiting: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    paddingVertical: 32
-  },
-  embeddedRoot: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: _sharedUi.macOSColors.background.base
-  },
-  embeddedHeader: {
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.macOSColors.border.default
-  }
-});
-//# sourceMappingURL=JsTopModal.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JsTopModal=JsTopModal;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _JsTopController=require("../engine/JsTopController");var _BusySparkline=require("./BusySparkline");var _TaskTable=require("./TaskTable");var _TaskDetailView=require("./TaskDetailView");var _jsxRuntime=require("react/jsx-runtime");function busyColor(e){if(e>=80)return _sharedUi.macOSColors.semantic.error;if(e>=40)return _sharedUi.macOSColors.semantic.warning;return _sharedUi.macOSColors.semantic.success}function freezeColor(e){return e>=100?_sharedUi.macOSColors.semantic.error:_sharedUi.macOSColors.semantic.warning}function diagnose(e){const r=e.rows.find(n=>n.api!=="unattributed"&&n.api!=="other");if(r&&r.pctOfBusy>=25&&e.busyPct>=15){return{color:r.pctOfBusy>=50?_sharedUi.macOSColors.semantic.error:_sharedUi.macOSColors.semantic.warning,icon:"\u25B2",text:`${r.label} is eating ${Math.round(r.pctOfBusy)}% of thread time \u2014 start there.`}}if(e.freezeSummary.count>0){return{color:freezeColor(e.freezeSummary.worstMs),icon:"\u25B2",text:`${e.freezeSummary.count} freeze${e.freezeSummary.count===1?"":"s"} in the last 60s (worst ${e.freezeSummary.worstMs}ms) \u2014 check rows marked \u26A0.`}}if(e.busyPct>=80){return{color:_sharedUi.macOSColors.semantic.warning,icon:"\u25B2",text:"Thread saturated by UI/React work \u2014 open Highlight Updates to find re-renders."}}return{color:_sharedUi.macOSColors.semantic.success,icon:"\u25CF",text:`Thread healthy at ${Math.round(e.busyPct)}% load \u2014 nothing worth chasing.`}}function JsTopModal({visible:e,onClose:r,onBack:n,onMinimize:x,initialModalState:p,minimizeTargetPosition:f,remoteSnapshot:d,remoteActions:u,embedded:S=false}){const o=d!==void 0;const[T,w]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{if(o||!e)return;return _JsTopController.JsTopController.subscribe(w)},[o,e]);const t=o?d:T;const a=(0,_react.useMemo)(()=>u??{pause:()=>_JsTopController.JsTopController.pause(),resume:()=>_JsTopController.JsTopController.resume(),clear:()=>_JsTopController.JsTopController.clear()},[u]);const s=t?.paused??false;const l=(t?.rows.length??0)>0;const[c,g]=(0,_react.useState)(null);const C=(0,_react.useCallback)(i=>g(i.key),[]);const h=!o&&c?_JsTopController.JsTopController.getOriginDetail(c):null;const y=c!==null;const m=(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[y?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>g(null)}):n?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:n}):null,(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:true,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.titleRow,children:[(0,_jsxRuntime.jsx)(_sharedUi.Activity,{size:14,color:"#34D399"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.title,children:"JS Top"}),t&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.busyPill,{borderColor:busyColor(t.busyPct)}],children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.busyText,{color:busyColor(t.busyPct)}],children:[t.busyPct.toFixed(0),"% BUSY"]})}),t&&t.freezeSummary.count>0&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.busyPill,{borderColor:freezeColor(t.freezeSummary.worstMs)}],children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.busyText,{color:freezeColor(t.freezeSummary.worstMs)}],children:["\u26A0 ",t.freezeSummary.count," \xB7"," ",t.freezeSummary.worstMs,"ms"]})})]})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:s?a.resume:a.pause,style:[styles.actionBtn,s&&styles.actionBtnActive],accessibilityLabel:s?"Resume sampling":"Pause sampling",children:s?(0,_jsxRuntime.jsx)(_sharedUi.Play,{size:14,color:_sharedUi.night.color.accent}):(0,_jsxRuntime.jsx)(_sharedUi.Pause,{size:14,color:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:a.clear,disabled:!l,style:[styles.actionBtn,!l&&styles.actionBtnDisabled],accessibilityLabel:"Clear stats",children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:l?_sharedUi.night.color.textTertiary:_sharedUi.night.color.textTertiary})})]})]});const b=(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.body,children:y?h?(0,_jsxRuntime.jsx)(_TaskDetailView.TaskDetailView,{detail:h}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.waiting,children:"This origin is no longer tracked (cleared or evicted)."}):t?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(()=>{const i=diagnose(t);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.diagnosis,{borderLeftColor:i.color}],children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diagnosisIcon,{color:i.color}],children:i.icon}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.diagnosisText,children:i.text})]})})(),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sparklineRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sparklineCaption,children:"JS THREAD LOAD \xB7 LAST 30s"}),(0,_jsxRuntime.jsx)(_BusySparkline.BusySparkline,{history:t.busyHistory})]}),!t.tiers.bridge&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.tierBanner,children:"\u201CSystem\u201D rows are UI/React/native work pure JS can\u2019t name \u2014 timers, rAF and Promise chains are fully attributed."}),(0,_jsxRuntime.jsx)(_TaskTable.TaskTable,{rows:t.rows,onSelectRow:o?void 0:C})]}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.waiting,children:o?"Waiting for device\u2026":"Starting engine\u2026"})});if(S){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.embeddedRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.embeddedHeader,children:m}),b]})}return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:r,onMinimize:x,minimizeTargetPosition:f,initialModalState:p,header:{showToggleButton:true,customContent:m},persistenceKey:"buoy-js-top-modal",enablePersistence:true,initialMode:"bottomSheet",disableScrollWrapper:true,children:b})}const styles=_reactNative.StyleSheet.create({titleRow:{flexDirection:"row",alignItems:"center",gap:8},title:{color:_sharedUi.night.color.text,fontSize:14,fontWeight:"500"},busyPill:{borderWidth:1,borderRadius:4,paddingHorizontal:6,paddingVertical:2},busyText:{fontSize:10,fontWeight:"700",fontVariant:["tabular-nums"]},actionBtn:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},actionBtnActive:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},actionBtnDisabled:{opacity:.55},body:{flex:1,minHeight:0,backgroundColor:"transparent"},diagnosis:{flexDirection:"row",alignItems:"center",gap:8,marginHorizontal:10,marginTop:8,paddingHorizontal:10,paddingVertical:8,backgroundColor:_sharedUi.night.color.surface,borderRadius:6,borderLeftWidth:3},diagnosisIcon:{fontSize:11,fontWeight:"700"},diagnosisText:{flex:1,color:_sharedUi.night.color.text,fontSize:12,lineHeight:16},sparklineRow:{paddingHorizontal:10,paddingVertical:8,gap:4},sparklineCaption:{color:_sharedUi.night.color.textTertiary,fontSize:8,fontWeight:"700",letterSpacing:.5},tierBanner:{color:_sharedUi.night.color.textTertiary,fontSize:10,paddingHorizontal:10,paddingBottom:6},waiting:{color:_sharedUi.night.color.textTertiary,fontSize:12,textAlign:"center",paddingVertical:32},embeddedRoot:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:_sharedUi.macOSColors.background.base},embeddedHeader:{borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default}});