@inspecto-dev/core 0.3.5 → 0.3.7

package/dist/index.cjs

@@ -3119,7 +3119,7 @@ function createBadge(ctx) {
   const state = asLauncherContext(ctx);
   const btn = document.createElement("div");
   btn.className = badgeClass;
-  btn.style.display = "flex";
+  btn.style.visibility = "hidden";
   const indicator = document.createElement("span");
   indicator.className = `${badgeClass}-indicator`;
   indicator.dataset.inspectoLauncherIndicator = "true";
@@ -3204,14 +3204,85 @@ function createBadge(ctx) {
   titleBlock.append(titleSpan, stateSpan);
   content.append(indicator, titleBlock);
   btn.append(content, eyes, panel);
+  let isDragging = false;
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let initialBadgeX = 0;
+  let initialBadgeY = 0;
+  const handleDragStart = (e) => {
+    const target = e.target;
+    if (target.closest(`.${badgeClass}-panel`) || target.closest(`[data-inspecto-launcher-action]`)) {
+      return;
+    }
+    if (e.type === "mousedown" && e.button !== 0) return;
+    const clientX = e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
+    const clientY = e.type === "touchstart" ? e.touches[0].clientY : e.clientY;
+    dragStartX = clientX;
+    dragStartY = clientY;
+    const rect = btn.getBoundingClientRect();
+    initialBadgeX = rect.left;
+    initialBadgeY = rect.top;
+    isDragging = false;
+    document.addEventListener("mousemove", handleDragMove, { passive: false });
+    document.addEventListener("mouseup", handleDragEnd);
+    document.addEventListener("touchmove", handleDragMove, { passive: false });
+    document.addEventListener("touchend", handleDragEnd);
+  };
+  const handleDragMove = (e) => {
+    const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
+    const clientY = e.type === "touchmove" ? e.touches[0].clientY : e.clientY;
+    const dx = clientX - dragStartX;
+    const dy = clientY - dragStartY;
+    if (!isDragging && Math.hypot(dx, dy) > 5) {
+      isDragging = true;
+      btn.style.transition = "none";
+    }
+    if (isDragging) {
+      e.preventDefault();
+      const maxX = window.innerWidth - btn.offsetWidth;
+      const maxY = window.innerHeight - btn.offsetHeight;
+      let newX = initialBadgeX + dx;
+      let newY = initialBadgeY + dy;
+      newX = Math.max(0, Math.min(newX, maxX));
+      newY = Math.max(0, Math.min(newY, maxY));
+      btn.style.bottom = "auto";
+      btn.style.right = "auto";
+      btn.style.left = `${newX}px`;
+      btn.style.top = `${newY}px`;
+    }
+  };
+  const handleDragEnd = () => {
+    document.removeEventListener("mousemove", handleDragMove);
+    document.removeEventListener("mouseup", handleDragEnd);
+    document.removeEventListener("touchmove", handleDragMove);
+    document.removeEventListener("touchend", handleDragEnd);
+    if (isDragging) {
+      btn.style.transition = "";
+      setTimeout(() => {
+        isDragging = false;
+      }, 0);
+    }
+  };
+  btn.addEventListener("mousedown", handleDragStart);
+  btn.addEventListener("touchstart", handleDragStart, { passive: false });
   btn.addEventListener("click", (event) => {
     var _a2, _b;
+    if (isDragging) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     if ((_b = (_a2 = event.target).closest) == null ? void 0 : _b.call(_a2, `[data-inspecto-launcher-action]`)) return;
     state.launcherPanelOpen = !state.launcherPanelOpen;
     state.updateBadgeContent();
   });
   state.shadowRootEl.appendChild(btn);
   updateLauncherEye(state);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      btn.style.visibility = "";
+    });
+  });
   return btn;
 }
 function setPaused(ctx, value) {
@@ -4103,8 +4174,70 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
   };
   updatePosition();
   menu.style.visibility = "visible";
-  setTimeout(() => input.focus(), 0);
+  const teardownDocFocusGuards = () => {
+    document.removeEventListener("focusin", onDocFocusIn, true);
+    document.removeEventListener("focusout", onDocFocusOut, true);
+  };
+  const onDocFocusIn = (e) => {
+    var _a3, _b2;
+    if (!menu.isConnected) {
+      teardownDocFocusGuards();
+      return;
+    }
+    const path = (_b2 = (_a3 = e.composedPath) == null ? void 0 : _a3.call(e)) != null ? _b2 : [];
+    if (path.includes(menu)) {
+      e.stopImmediatePropagation();
+    }
+  };
+  const onDocFocusOut = (e) => {
+    if (!menu.isConnected) {
+      teardownDocFocusGuards();
+      return;
+    }
+    const related = e.relatedTarget;
+    if (!related) return;
+    if (related === shadowRoot.host) {
+      e.stopImmediatePropagation();
+      return;
+    }
+    if (related instanceof Node && menu.contains(related)) {
+      e.stopImmediatePropagation();
+    }
+  };
+  document.addEventListener("focusin", onDocFocusIn, true);
+  document.addEventListener("focusout", onDocFocusOut, true);
+  const focusAskInput = () => {
+    try {
+      input.focus({ preventScroll: true });
+    } catch (e) {
+      input.focus();
+    }
+  };
+  const isAskInputFocused = () => {
+    try {
+      return shadowRoot.activeElement === input;
+    } catch (e) {
+      return false;
+    }
+  };
+  focusAskInput();
+  const rafId = requestAnimationFrame(() => {
+    if (!menu.isConnected) return;
+    if (!isAskInputFocused()) focusAskInput();
+  });
+  const focusTimeoutId = setTimeout(() => {
+    if (!menu.isConnected) return;
+    if (!isAskInputFocused()) focusAskInput();
+  }, 50);
   const onDocClick = (e) => {
+    const eventTarget = e.target;
+    if (eventTarget) {
+      if (eventTarget.closest(
+        '[role="dialog"], [role="menu"], [role="tooltip"], [role="presentation"], [role="listbox"], [data-radix-popper-content-wrapper], [data-radix-focus-guard]'
+      )) {
+        return;
+      }
+    }
     const path = e.composedPath();
     if (path.includes(menu)) return;
     cleanup();
@@ -4112,6 +4245,9 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
   setTimeout(() => document.addEventListener("click", onDocClick, { capture: true }), 0);
   function cleanup() {
     document.removeEventListener("click", onDocClick, { capture: true });
+    teardownDocFocusGuards();
+    cancelAnimationFrame(rafId);
+    clearTimeout(focusTimeoutId);
     menu.remove();
     onClose();
   }
@@ -4967,6 +5103,14 @@ function handleMouseMove(ctx, event) {
   state.lastPointerY = event.clientY;
   state.updateLauncherEye();
   if (state.cleanupMenu !== null) {
+    const eventTarget = event.target;
+    if (eventTarget) {
+      if (eventTarget.closest(
+        '[role="dialog"], [role="menu"], [role="tooltip"], [role="presentation"], [role="listbox"], [data-radix-popper-content-wrapper], [data-radix-focus-guard]'
+      )) {
+        return;
+      }
+    }
     state.overlay.hide();
     return;
   }
@@ -4992,7 +5136,17 @@ function handleMouseMove(ctx, event) {
 }
 function handleTrigger(ctx, event) {
   const state = asInteractionContext(ctx);
-  if (state.cleanupMenu !== null) return;
+  if (state.cleanupMenu !== null) {
+    const eventTarget = event.target;
+    if (eventTarget) {
+      if (eventTarget.closest(
+        '[role="dialog"], [role="menu"], [role="tooltip"], [role="presentation"], [role="listbox"], [data-radix-popper-content-wrapper], [data-radix-focus-guard]'
+      )) {
+        return;
+      }
+    }
+    return;
+  }
   if (!state.isInspectorActive(event)) return;
   const target = findInspectable(event.target);
   if (!target) return;
@@ -6116,6 +6270,7 @@ function createOverlay(shadowRoot) {
   overlay.style.display = "none";
   const tooltip = document.createElement("div");
   tooltip.className = tooltipClass;
+  tooltip.style.display = "none";
   const tagSpan = document.createElement("span");
   tagSpan.className = tagClass;
   const idSpan = document.createElement("span");