@agent-native/pinpoint 0.1.4 → 0.1.8

package/dist/{chunk-PQIWC4FE.js → chunk-6YK47AB5.js}

@@ -2955,15 +2955,40 @@ var LINE_WIDTHS = [{
   width: 8,
   name: "Thick"
 }];
+var EDGE_GAP = 16;
+var COLLAPSED_TOOLBAR_SIZE = 60;
+var EXPANDED_TOOLBAR_WIDTH = 320;
+var AGENT_SIDEBAR_SELECTOR = ".agent-sidebar-panel";
+function clampRightOffset(right, toolbarWidth) {
+  if (typeof window === "undefined") return right;
+  const maxRight = Math.max(0, window.innerWidth - toolbarWidth - EDGE_GAP);
+  return Math.min(right, maxRight);
+}
+function getVisibleRightSidebarInset() {
+  if (typeof window === "undefined") return 0;
+  let inset = 0;
+  for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
+    const style2 = window.getComputedStyle(panel);
+    if (style2.display === "none" || style2.visibility === "hidden" || panel.getAttribute("aria-hidden") === "true") {
+      continue;
+    }
+    const rect = panel.getBoundingClientRect();
+    const isVisible = rect.width > 0 && rect.height > 0;
+    const isAnchoredToRight = rect.right >= window.innerWidth - 1 && rect.left < window.innerWidth - 1;
+    if (!isVisible || !isAnchoredToRight) continue;
+    inset = Math.max(inset, Math.ceil(window.innerWidth - rect.left));
+  }
+  return inset;
+}
 var Toolbar = (props) => {
   const [pos, setPos] = createSignal(props.position ? {
     right: window.innerWidth - props.position.x,
     bottom: window.innerHeight - props.position.y
   } : {
-    right: 16,
-    bottom: 16
+    right: EDGE_GAP,
+    bottom: EDGE_GAP
   });
-  const [dragging, setDragging] = createSignal(false);
+  const [reservedRight, setReservedRight] = createSignal(0);
   const [dragStart, setDragStart] = createSignal({
     x: 0,
     y: 0,
@@ -2971,9 +2996,41 @@ var Toolbar = (props) => {
     bottom: 0
   });
   const [didDrag, setDidDrag] = createSignal(false);
+  onMount(() => {
+    if (typeof window === "undefined") return;
+    let resizeObserver;
+    const updateReservedRight = () => {
+      setReservedRight(getVisibleRightSidebarInset());
+      resizeObserver?.disconnect();
+      if (typeof ResizeObserver === "undefined") return;
+      resizeObserver = new ResizeObserver(() => {
+        setReservedRight(getVisibleRightSidebarInset());
+      });
+      for (const panel of document.querySelectorAll(AGENT_SIDEBAR_SELECTOR)) {
+        resizeObserver.observe(panel);
+      }
+    };
+    updateReservedRight();
+    const mutationObserver = new MutationObserver(updateReservedRight);
+    mutationObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class", "style", "aria-hidden"],
+      childList: true,
+      subtree: true
+    });
+    window.addEventListener("resize", updateReservedRight);
+    onCleanup(() => {
+      mutationObserver.disconnect();
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", updateReservedRight);
+    });
+  });
+  const toolbarRight = () => {
+    const toolbarWidth = props.expanded ? EXPANDED_TOOLBAR_WIDTH : COLLAPSED_TOOLBAR_SIZE;
+    return clampRightOffset((props.expanded ? EDGE_GAP : pos().right) + reservedRight(), toolbarWidth);
+  };
   function handleMouseDown(e) {
     if (props.expanded) return;
-    setDragging(true);
     setDidDrag(false);
     setDragStart({
       x: e.clientX,
@@ -2986,20 +3043,20 @@ var Toolbar = (props) => {
       const start = dragStart();
       const dx = e2.clientX - start.x;
       const dy = e2.clientY - start.y;
+      const maxRight = Math.max(0, window.innerWidth - reservedRight() - COLLAPSED_TOOLBAR_SIZE);
       setPos({
-        right: Math.max(0, Math.min(window.innerWidth - 60, start.right - dx)),
-        bottom: Math.max(0, Math.min(window.innerHeight - 60, start.bottom - dy))
+        right: Math.max(0, Math.min(maxRight, start.right - dx)),
+        bottom: Math.max(0, Math.min(window.innerHeight - COLLAPSED_TOOLBAR_SIZE, start.bottom - dy))
       });
     };
     const handleUp = () => {
-      setDragging(false);
       window.removeEventListener("mousemove", handleMove);
       window.removeEventListener("mouseup", handleUp);
     };
     window.addEventListener("mousemove", handleMove);
     window.addEventListener("mouseup", handleUp);
   }
-  function handleClick(e) {
+  function handleClick() {
     if (props.expanded) return;
     if (didDrag()) return;
     props.onToggleExpand();
@@ -3347,10 +3404,10 @@ var Toolbar = (props) => {
     createRenderEffect((_p$) => {
       var _v$ = `pp-toolbar ${props.expanded ? "pp-toolbar--expanded" : "pp-toolbar--collapsed"}`, _v$2 = {
         ...props.expanded ? {
-          bottom: "16px",
-          right: "16px"
+          bottom: `${EDGE_GAP}px`,
+          right: `${toolbarRight()}px`
         } : {
-          right: `${pos().right}px`,
+          right: `${toolbarRight()}px`,
           bottom: `${pos().bottom}px`
         }
       };
@@ -4040,7 +4097,6 @@ var PinpointApp = (props) => {
   const [active, setActive] = createSignal(false);
   const [expanded, setExpanded] = createSignal(false);
   const [pins, setPins] = createSignal([]);
-  const [hoveredElement, setHoveredElement] = createSignal(null);
   const [hoveredRect, setHoveredRect] = createSignal(null);
   const [selectedElement, setSelectedElement] = createSignal(null);
   const [selectedContext, setSelectedContext] = createSignal(null);
@@ -4099,7 +4155,6 @@ var PinpointApp = (props) => {
     ignoreSelector: "#pinpoint-root, [data-pinpoint-marker]",
     blockInteractions: blockInteractions(),
     onHover: (element, rect) => {
-      setHoveredElement(element);
       setHoveredRect(rect);
       if (element && rect) {
         const framework = detectFramework();
@@ -4441,7 +4496,6 @@ var PinpointApp = (props) => {
     picker.deactivate();
     dragSelect.deactivate();
     textSelect.deactivate();
-    setHoveredElement(null);
     setHoveredRect(null);
     setSelectionLabelInfo(null);
   }
@@ -4867,4 +4921,4 @@ export {
   mountPinpoint,
   unmountPinpoint
 };
-//# sourceMappingURL=chunk-PQIWC4FE.js.map
+//# sourceMappingURL=chunk-6YK47AB5.js.map