@skippr/live-agent-sdk 0.32.0 → 0.33.0

package/dist/esm/lib-exports.js

@@ -1194,255 +1194,6 @@ function DomCapture() {
 
 // src/components/HighlightOverlay.tsx
 import { useDataChannel } from "@livekit/components-react/hooks";
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-var TOOLTIP_MAX_WIDTH = 280;
-var TOOLTIP_GAP = 8;
-var VIEWPORT_MARGIN = 8;
-var TOOLTIP_TOP_THRESHOLD = 48;
-var Z_INDEX = 2147483646;
-var RING_INNER = "oklab(0.585 0.0288678 -0.231205 / 0.95)";
-var RING_OUTER = "oklab(0.585 0.0288678 -0.231205 / 0.25)";
-var textDecoder = new TextDecoder;
-function parseHighlightMessage(payload) {
-  try {
-    const json = JSON.parse(textDecoder.decode(payload));
-    if (!json || typeof json !== "object")
-      return null;
-    if (json.type === "show" && typeof json.ref === "string") {
-      return {
-        type: "show",
-        ref: json.ref,
-        message: typeof json.message === "string" ? json.message : ""
-      };
-    }
-    if (json.type === "clear")
-      return { type: "clear" };
-    return null;
-  } catch {
-    return null;
-  }
-}
-function safeGetIframeDocument(iframe) {
-  try {
-    return iframe.contentDocument;
-  } catch {
-    return null;
-  }
-}
-function safeQuerySelector(doc, selector) {
-  try {
-    return doc.querySelector(selector);
-  } catch {
-    return null;
-  }
-}
-function safeQueryAllIframes(doc) {
-  try {
-    return Array.from(doc.querySelectorAll("iframe"));
-  } catch {
-    return [];
-  }
-}
-function findElementInDocumentTree(rootDoc, selector) {
-  const hit = safeQuerySelector(rootDoc, selector);
-  if (hit)
-    return hit;
-  for (const iframe of safeQueryAllIframes(rootDoc)) {
-    const innerDoc = safeGetIframeDocument(iframe);
-    if (!innerDoc)
-      continue;
-    const nested = findElementInDocumentTree(innerDoc, selector);
-    if (nested)
-      return nested;
-  }
-  return null;
-}
-function findElementByRef(ref) {
-  const selector = `[${REF_ATTR}="${CSS.escape(ref)}"]`;
-  return findElementInDocumentTree(document, selector);
-}
-function findIframeHostingDocument(targetDoc) {
-  const queue = [document];
-  while (queue.length > 0) {
-    const doc = queue.shift();
-    if (!doc)
-      continue;
-    for (const iframe of safeQueryAllIframes(doc)) {
-      if (safeGetIframeDocument(iframe) === targetDoc)
-        return iframe;
-      const innerDoc = safeGetIframeDocument(iframe);
-      if (innerDoc)
-        queue.push(innerDoc);
-    }
-  }
-  return null;
-}
-function getRectInTopViewport(el) {
-  let rect = el.getBoundingClientRect();
-  let ownerDoc = el.ownerDocument;
-  while (ownerDoc && ownerDoc !== document) {
-    const hostingIframe = findIframeHostingDocument(ownerDoc);
-    if (!hostingIframe)
-      return rect;
-    const iframeRect = hostingIframe.getBoundingClientRect();
-    rect = new DOMRect(rect.left + iframeRect.left, rect.top + iframeRect.top, rect.width, rect.height);
-    ownerDoc = hostingIframe.ownerDocument;
-  }
-  return rect;
-}
-function findScrollableAncestor(el) {
-  const win = el.ownerDocument?.defaultView ?? window;
-  let node = el.parentElement;
-  while (node) {
-    const overflow = win.getComputedStyle(node).overflow;
-    if (/auto|scroll|overlay/.test(overflow))
-      return node;
-    node = node.parentElement;
-  }
-  return el.ownerDocument?.documentElement ?? document.documentElement;
-}
-function HighlightOverlay() {
-  const [overlayState, setOverlayState] = useState3(null);
-  const targetElementRef = useRef3(null);
-  const pendingFrameRef = useRef3(null);
-  const clearOverlay = useCallback3(() => {
-    targetElementRef.current = null;
-    setOverlayState(null);
-  }, []);
-  const recomputeRect = useCallback3(() => {
-    pendingFrameRef.current = null;
-    const target = targetElementRef.current;
-    if (!target)
-      return;
-    if (!target.isConnected) {
-      clearOverlay();
-      return;
-    }
-    const rect2 = getRectInTopViewport(target);
-    setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
-  }, [clearOverlay]);
-  const scheduleRecompute = useCallback3(() => {
-    if (pendingFrameRef.current !== null)
-      return;
-    pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
-  }, [recomputeRect]);
-  const onHighlightMessage = useCallback3((msg) => {
-    const parsed = parseHighlightMessage(msg.payload);
-    if (!parsed)
-      return;
-    if (parsed.type === "clear") {
-      clearOverlay();
-      return;
-    }
-    const target = findElementByRef(parsed.ref);
-    if (!target) {
-      clearOverlay();
-      return;
-    }
-    targetElementRef.current = target;
-    setOverlayState({
-      ref: parsed.ref,
-      message: parsed.message ?? "",
-      rect: getRectInTopViewport(target)
-    });
-  }, [clearOverlay]);
-  useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
-  useEffect5(() => {
-    if (!overlayState)
-      return;
-    const target = targetElementRef.current;
-    if (!target)
-      return;
-    const onScroll = () => scheduleRecompute();
-    const onResize = () => scheduleRecompute();
-    const watchedWindows = new Set;
-    watchedWindows.add(window);
-    const ownerWindow = target.ownerDocument?.defaultView;
-    if (ownerWindow && ownerWindow !== window)
-      watchedWindows.add(ownerWindow);
-    for (const win of watchedWindows) {
-      win.addEventListener("scroll", onScroll, { capture: true, passive: true });
-      win.addEventListener("resize", onResize, { passive: true });
-    }
-    const resizeObserver = new ResizeObserver(scheduleRecompute);
-    resizeObserver.observe(target);
-    const scrollContainer = findScrollableAncestor(target);
-    const mutationObserver = new MutationObserver(() => {
-      if (!targetElementRef.current?.isConnected) {
-        clearOverlay();
-        return;
-      }
-      scheduleRecompute();
-    });
-    mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
-    return () => {
-      for (const win of watchedWindows) {
-        win.removeEventListener("scroll", onScroll, { capture: true });
-        win.removeEventListener("resize", onResize);
-      }
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-      if (pendingFrameRef.current !== null) {
-        window.cancelAnimationFrame(pendingFrameRef.current);
-        pendingFrameRef.current = null;
-      }
-    };
-  }, [overlayState, scheduleRecompute, clearOverlay]);
-  if (!overlayState)
-    return null;
-  const { rect, message } = overlayState;
-  const ringStyle = {
-    position: "fixed",
-    left: `${rect.left}px`,
-    top: `${rect.top}px`,
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    pointerEvents: "none",
-    zIndex: Z_INDEX,
-    boxShadow: `0 0 0 2px ${RING_INNER}, 0 0 0 6px ${RING_OUTER}`,
-    borderRadius: "4px",
-    transition: "none"
-  };
-  const showTooltipBelow = rect.top < TOOLTIP_TOP_THRESHOLD;
-  const tooltipTop = showTooltipBelow ? rect.bottom + TOOLTIP_GAP : rect.top - TOOLTIP_GAP;
-  const tooltipTransform = showTooltipBelow ? "translateY(0)" : "translateY(-100%)";
-  const tooltipLeft = Math.min(Math.max(rect.left, VIEWPORT_MARGIN), window.innerWidth - TOOLTIP_MAX_WIDTH - VIEWPORT_MARGIN);
-  const tooltipStyle = {
-    position: "fixed",
-    left: `${tooltipLeft}px`,
-    top: `${tooltipTop}px`,
-    transform: tooltipTransform,
-    maxWidth: `${TOOLTIP_MAX_WIDTH}px`,
-    pointerEvents: "none",
-    zIndex: Z_INDEX,
-    background: "rgba(45, 43, 61, 0.96)",
-    color: "#ffffff",
-    padding: "6px 10px",
-    borderRadius: "8px",
-    fontSize: "13px",
-    lineHeight: "1.35",
-    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif',
-    boxShadow: "0 6px 20px rgba(0, 0, 0, 0.25)",
-    whiteSpace: "normal",
-    wordWrap: "break-word"
-  };
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        "data-skippr-private": "true",
-        style: ringStyle,
-        "aria-hidden": "true"
-      }),
-      message && /* @__PURE__ */ jsx("div", {
-        "data-skippr-private": "true",
-        style: tooltipStyle,
-        role: "tooltip",
-        children: message
-      })
-    ]
-  });
-}
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement3 } from "react";
 
@@ -1640,8 +1391,19 @@ var __iconNode14 = [
   ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
 ];
 var Monitor = createLucideIcon("monitor", __iconNode14);
-// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.js
 var __iconNode15 = [
+  [
+    "path",
+    {
+      d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z",
+      key: "edeuup"
+    }
+  ]
+];
+var MousePointer2 = createLucideIcon("mouse-pointer-2", __iconNode15);
+// ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/phone-off.js
+var __iconNode16 = [
   [
     "path",
     {
@@ -1658,9 +1420,9 @@ var __iconNode15 = [
     }
   ]
 ];
-var PhoneOff = createLucideIcon("phone-off", __iconNode15);
+var PhoneOff = createLucideIcon("phone-off", __iconNode16);
 // ../../node_modules/.bun/lucide-react@1.8.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/send.js
-var __iconNode16 = [
+var __iconNode17 = [
   [
     "path",
     {
@@ -1670,7 +1432,238 @@ var __iconNode16 = [
   ],
   ["path", { d: "m21.854 2.147-10.94 10.939", key: "12cjpa" }]
 ];
-var Send = createLucideIcon("send", __iconNode16);
+var Send = createLucideIcon("send", __iconNode17);
+// src/components/HighlightOverlay.tsx
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Z_INDEX = 2147483646;
+var HIGHLIGHT_PADDING = 6;
+var textDecoder = new TextDecoder;
+function parseHighlightMessage(payload) {
+  try {
+    const json = JSON.parse(textDecoder.decode(payload));
+    if (!json || typeof json !== "object")
+      return null;
+    if (json.type === "show" && typeof json.ref === "string") {
+      return {
+        type: "show",
+        ref: json.ref,
+        message: typeof json.message === "string" ? json.message : undefined
+      };
+    }
+    if (json.type === "clear")
+      return { type: "clear" };
+    return null;
+  } catch {
+    return null;
+  }
+}
+function safeGetIframeDocument(iframe) {
+  try {
+    return iframe.contentDocument;
+  } catch {
+    return null;
+  }
+}
+function safeQuerySelector(doc, selector) {
+  try {
+    return doc.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+function safeQueryAllIframes(doc) {
+  try {
+    return Array.from(doc.querySelectorAll("iframe"));
+  } catch {
+    return [];
+  }
+}
+function findElementInDocumentTree(rootDoc, selector) {
+  const hit = safeQuerySelector(rootDoc, selector);
+  if (hit)
+    return hit;
+  for (const iframe of safeQueryAllIframes(rootDoc)) {
+    const innerDoc = safeGetIframeDocument(iframe);
+    if (!innerDoc)
+      continue;
+    const nested = findElementInDocumentTree(innerDoc, selector);
+    if (nested)
+      return nested;
+  }
+  return null;
+}
+function findElementByRef(ref) {
+  const selector = `[${REF_ATTR}="${CSS.escape(ref)}"]`;
+  return findElementInDocumentTree(document, selector);
+}
+function findIframeHostingDocument(targetDoc) {
+  const queue = [document];
+  while (queue.length > 0) {
+    const doc = queue.shift();
+    if (!doc)
+      continue;
+    for (const iframe of safeQueryAllIframes(doc)) {
+      if (safeGetIframeDocument(iframe) === targetDoc)
+        return iframe;
+      const innerDoc = safeGetIframeDocument(iframe);
+      if (innerDoc)
+        queue.push(innerDoc);
+    }
+  }
+  return null;
+}
+function getRectInTopViewport(el) {
+  let rect = el.getBoundingClientRect();
+  let ownerDoc = el.ownerDocument;
+  while (ownerDoc && ownerDoc !== document) {
+    const hostingIframe = findIframeHostingDocument(ownerDoc);
+    if (!hostingIframe)
+      return rect;
+    const iframeRect = hostingIframe.getBoundingClientRect();
+    rect = new DOMRect(rect.left + iframeRect.left, rect.top + iframeRect.top, rect.width, rect.height);
+    ownerDoc = hostingIframe.ownerDocument;
+  }
+  return rect;
+}
+function findScrollableAncestor(el) {
+  const win = el.ownerDocument?.defaultView ?? window;
+  let node = el.parentElement;
+  while (node) {
+    const overflow = win.getComputedStyle(node).overflow;
+    if (/auto|scroll|overlay/.test(overflow))
+      return node;
+    node = node.parentElement;
+  }
+  return el.ownerDocument?.documentElement ?? document.documentElement;
+}
+function HighlightOverlay() {
+  const [overlayState, setOverlayState] = useState3(null);
+  const targetElementRef = useRef3(null);
+  const pendingFrameRef = useRef3(null);
+  const clearOverlay = useCallback3(() => {
+    targetElementRef.current = null;
+    setOverlayState(null);
+  }, []);
+  const recomputeRect = useCallback3(() => {
+    pendingFrameRef.current = null;
+    const target = targetElementRef.current;
+    if (!target)
+      return;
+    if (!target.isConnected) {
+      clearOverlay();
+      return;
+    }
+    const rect2 = getRectInTopViewport(target);
+    setOverlayState((prev) => prev ? { ...prev, rect: rect2 } : prev);
+  }, [clearOverlay]);
+  const scheduleRecompute = useCallback3(() => {
+    if (pendingFrameRef.current !== null)
+      return;
+    pendingFrameRef.current = window.requestAnimationFrame(recomputeRect);
+  }, [recomputeRect]);
+  const onHighlightMessage = useCallback3((msg) => {
+    const parsed = parseHighlightMessage(msg.payload);
+    if (!parsed)
+      return;
+    if (parsed.type === "clear") {
+      clearOverlay();
+      return;
+    }
+    const target = findElementByRef(parsed.ref);
+    if (!target) {
+      clearOverlay();
+      return;
+    }
+    targetElementRef.current = target;
+    setOverlayState({
+      ref: parsed.ref,
+      message: parsed.message || "Click here",
+      rect: getRectInTopViewport(target)
+    });
+  }, [clearOverlay]);
+  useDataChannel(HIGHLIGHT_TOPIC, onHighlightMessage);
+  useEffect5(() => {
+    if (!overlayState)
+      return;
+    const target = targetElementRef.current;
+    if (!target)
+      return;
+    const onScroll = () => scheduleRecompute();
+    const onResize = () => scheduleRecompute();
+    const watchedWindows = new Set;
+    watchedWindows.add(window);
+    const ownerWindow = target.ownerDocument?.defaultView;
+    if (ownerWindow && ownerWindow !== window)
+      watchedWindows.add(ownerWindow);
+    for (const win of watchedWindows) {
+      win.addEventListener("scroll", onScroll, { capture: true, passive: true });
+      win.addEventListener("resize", onResize, { passive: true });
+    }
+    const resizeObserver = new ResizeObserver(scheduleRecompute);
+    resizeObserver.observe(target);
+    const scrollContainer = findScrollableAncestor(target);
+    const mutationObserver = new MutationObserver(() => {
+      if (!targetElementRef.current?.isConnected) {
+        clearOverlay();
+        return;
+      }
+      scheduleRecompute();
+    });
+    mutationObserver.observe(scrollContainer, { childList: true, subtree: true });
+    return () => {
+      for (const win of watchedWindows) {
+        win.removeEventListener("scroll", onScroll, { capture: true });
+        win.removeEventListener("resize", onResize);
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      if (pendingFrameRef.current !== null) {
+        window.cancelAnimationFrame(pendingFrameRef.current);
+        pendingFrameRef.current = null;
+      }
+    };
+  }, [overlayState, scheduleRecompute, clearOverlay]);
+  if (!overlayState)
+    return null;
+  const { rect, message } = overlayState;
+  const containerStyle = {
+    position: "fixed",
+    left: `${rect.left - HIGHLIGHT_PADDING}px`,
+    top: `${rect.top - HIGHLIGHT_PADDING}px`,
+    width: `${rect.width + HIGHLIGHT_PADDING * 2}px`,
+    height: `${rect.height + HIGHLIGHT_PADDING * 2}px`,
+    pointerEvents: "none",
+    zIndex: Z_INDEX
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    "data-skippr-private": "true",
+    style: containerStyle,
+    className: "skippr:relative",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        "aria-hidden": "true",
+        className: "skippr:absolute skippr:inset-0 skippr:rounded-[1rem] skippr:border-2 skippr:border-cyan-400 skippr:animate-skippr-annotation-pulse"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        role: "tooltip",
+        className: "skippr:absolute skippr:-bottom-9 skippr:left-1/2 skippr:-translate-x-1/2 skippr:flex skippr:items-center skippr:gap-1.5 skippr:rounded-full skippr:bg-cyan-400 skippr:px-2.5 skippr:py-1 skippr:shadow-[0_4px_12px_rgba(0,0,0,0.12)]",
+        children: [
+          /* @__PURE__ */ jsx(MousePointer2, {
+            "aria-hidden": "true",
+            className: "skippr:h-3 skippr:w-3 skippr:text-cyan-900",
+            fill: "currentColor"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: "skippr:text-[11px] skippr:font-medium skippr:text-cyan-900 skippr:whitespace-nowrap",
+            children: message
+          })
+        ]
+      })
+    ]
+  });
+}
+
 // src/components/MinimizedBubble.tsx
 import { useEffect as useEffect6 } from "react";
 
@@ -1734,7 +1727,7 @@ function useAgentVoiceState() {
 }
 
 // src/components/LauncherStatusPill.tsx
-import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 function pillStatusFromAgent(state, canSeePage) {
   if (state === "speaking")
     return "talking";
@@ -1762,7 +1755,7 @@ function LauncherStatusPill() {
     children: /* @__PURE__ */ jsxs2("span", {
       className: "skippr:flex skippr:items-center skippr:gap-2 skippr:animate-[skippr-pill-content_0.22s_ease-out]",
       children: [
-        status === "observing" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "observing" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(ObservingIcon, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1770,7 +1763,7 @@ function LauncherStatusPill() {
             })
           ]
         }),
-        status === "connected" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "connected" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(ConnectedDot, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1778,7 +1771,7 @@ function LauncherStatusPill() {
             })
           ]
         }),
-        status === "talking" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "talking" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(SpeakingBars, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1786,7 +1779,7 @@ function LauncherStatusPill() {
             })
           ]
         }),
-        status === "thinking" && /* @__PURE__ */ jsxs2(Fragment2, {
+        status === "thinking" && /* @__PURE__ */ jsxs2(Fragment, {
           children: [
             /* @__PURE__ */ jsx2(ThinkingDots, {}),
             /* @__PURE__ */ jsx2("span", {
@@ -1958,7 +1951,7 @@ function Logo({ className }) {
 }
 
 // src/components/MinimizedBubble.tsx
-import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4, Fragment as Fragment2 } from "react/jsx-runtime";
 var CONTROL_BUTTON = "skippr:flex skippr:size-12 skippr:items-center skippr:justify-center skippr:rounded-[14px] skippr:cursor-pointer skippr:transition-all skippr:hover:-translate-y-0.5 skippr:active:translate-y-0";
 var CONTROL_SHADOW = "skippr:shadow-[0_4px_16px_rgba(0,0,0,0.15),0_2px_4px_rgba(0,0,0,0.1)]";
 function ConnectedLauncher() {
@@ -1969,7 +1962,7 @@ function ConnectedLauncher() {
     setSidebarTab("chat");
     expandPanel();
   };
-  return /* @__PURE__ */ jsxs4(Fragment3, {
+  return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4("button", {
         type: "button",
@@ -2055,7 +2048,7 @@ function MinimizedBubble({
 }) {
   const { isConnected, isStarting, position } = useLiveAgent();
   const inSession = isConnected || isStarting;
-  return /* @__PURE__ */ jsxs4(Fragment3, {
+  return /* @__PURE__ */ jsxs4(Fragment2, {
     children: [
       /* @__PURE__ */ jsx4(LauncherStatusPill, {}),
       /* @__PURE__ */ jsxs4("div", {
@@ -2969,7 +2962,7 @@ function StartSessionPrompt({
 }
 
 // src/components/Sidebar.tsx
-import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15, Fragment as Fragment3 } from "react/jsx-runtime";
 function Sidebar({
   hideControls = false,
   hideHeader = false,
@@ -3055,7 +3048,7 @@ function AuthenticatedContent({
   autoFocusChat,
   showScreenShareToggle
 }) {
-  return /* @__PURE__ */ jsxs15(Fragment4, {
+  return /* @__PURE__ */ jsxs15(Fragment3, {
     children: [
       isConnected && /* @__PURE__ */ jsx17(ConnectedBanner, {}),
       /* @__PURE__ */ jsxs15("div", {