@inspecto-dev/core 0.3.6 → 0.3.8

package/dist/index.cjs

@@ -2206,9 +2206,29 @@ function parseAttrValue(value) {
   if (isNaN(line) || isNaN(col) || !file) return null;
   return { file, line, column: col };
 }
+function parseAstroAttrValue(file, loc) {
+  const parts = loc.split(":");
+  if (parts.length !== 2) return null;
+  const line = parseInt(parts[0], 10);
+  const column = parseInt(parts[1], 10);
+  if (isNaN(line) || isNaN(column) || !file) return null;
+  return { file, line, column };
+}
+function getInspectableLocation(el) {
+  const attrValue = el.getAttribute(ATTR_NAME);
+  if (attrValue) {
+    return parseAttrValue(attrValue);
+  }
+  const astroFile = el.getAttribute(ASTRO_FILE_ATTR_NAME);
+  const astroLoc = el.getAttribute(ASTRO_LOC_ATTR_NAME);
+  if (astroFile && astroLoc) {
+    return parseAstroAttrValue(astroFile, astroLoc);
+  }
+  return null;
+}
 function findInspectable(el) {
   while (el) {
-    if (el.hasAttribute(ATTR_NAME)) return el;
+    if (getInspectableLocation(el)) return el;
     el = el.parentElement;
   }
   return null;
@@ -2258,11 +2278,13 @@ function createElementSelector(element) {
   }
   return segments.join(" > ");
 }
-var ATTR_NAME;
+var ATTR_NAME, ASTRO_FILE_ATTR_NAME, ASTRO_LOC_ATTR_NAME;
 var init_component_utils = __esm({
   "src/component-utils.ts"() {
     "use strict";
     ATTR_NAME = "data-inspecto";
+    ASTRO_FILE_ATTR_NAME = "data-astro-source-file";
+    ASTRO_LOC_ATTR_NAME = "data-astro-source-loc";
   }
 });
 
@@ -2424,7 +2446,16 @@ function findElementForLocation(_ctx, location, selector) {
   const byLocation = Array.from(document.querySelectorAll(`[${ATTR_NAME}]`)).find(
     (candidate) => candidate.getAttribute(ATTR_NAME) === locationAttr
   );
-  return byLocation instanceof Element ? byLocation : null;
+  if (byLocation instanceof Element) {
+    return byLocation;
+  }
+  const byAstroLocation = Array.from(
+    document.querySelectorAll("[data-astro-source-file][data-astro-source-loc]")
+  ).find((candidate) => {
+    const candidateLocation = getInspectableLocation(candidate);
+    return (candidateLocation == null ? void 0 : candidateLocation.file) === location.file && candidateLocation.line === location.line && candidateLocation.column === location.column;
+  });
+  return byAstroLocation instanceof Element ? byAstroLocation : null;
 }
 function rebindCurrentAnnotationElements(ctx) {
   const state = asAnnotateContext(ctx);
@@ -4174,7 +4205,61 @@ 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) {
@@ -4191,6 +4276,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();
   }
@@ -5067,9 +5155,8 @@ function handleMouseMove(ctx, event) {
     state.overlay.hide();
     return;
   }
-  const attrValue = target.getAttribute(ATTR_NAME);
-  const loc = parseAttrValue(attrValue);
-  const label = loc ? `${(_a2 = loc.file.split("/").pop()) != null ? _a2 : ""}:${loc.line}` : attrValue;
+  const loc = getInspectableLocation(target);
+  const label = loc ? `${(_a2 = loc.file.split("/").pop()) != null ? _a2 : ""}:${loc.line}` : "";
   if (state.mode === "annotate" && state.annotateCapturePaused) {
     state.overlay.hide();
     return;
@@ -5096,8 +5183,7 @@ function handleTrigger(ctx, event) {
   if (state.mode === "annotate" && state.annotateCapturePaused) return;
   event.preventDefault();
   event.stopPropagation();
-  const attrValue = target.getAttribute(ATTR_NAME);
-  const loc = parseAttrValue(attrValue);
+  const loc = getInspectableLocation(target);
   if (!loc) return;
   if (state.mode === "annotate") {
     if (state.annotateQuickCaptureEnabled) {
@@ -5117,10 +5203,13 @@ function handleTrigger(ctx, event) {
   state.openInspectMenu(loc, event.clientX, event.clientY, target);
 }
 function handleKeyDown(ctx, event) {
-  var _a2;
   const state = asInteractionContext(ctx);
   if (event.key === "Escape") {
-    (_a2 = state.cleanupMenu) == null ? void 0 : _a2.call(state);
+    if (state.cleanupMenu !== null) {
+      state.cleanupMenu();
+    } else if (!state.disabled) {
+      state.pause();
+    }
     state.overlay.hide();
   }
   state.updateLauncherEye();
@@ -6722,6 +6811,9 @@ var init_component = __esm({
       updateLauncherEye() {
         updateLauncherEye(this);
       }
+      pause() {
+        this.setPaused(true);
+      }
       openInspectMenu(loc, clientX, clientY, targetElement) {
         openInspectMenu(this, loc, clientX, clientY, targetElement);
       }
@@ -6893,7 +6985,7 @@ var TAG_NAME = "inspecto-overlay";
 function mountInspector() {
   return __async(this, arguments, function* (options = {}) {
     if (typeof document === "undefined") return null;
-    const { InspectoElement: InspectoElement2 } = yield Promise.resolve().then(() => (init_component(), component_exports));
+    const { InspectoElement: _InspectoElement } = yield Promise.resolve().then(() => (init_component(), component_exports));
     const existing = document.querySelector(TAG_NAME);
     if (existing) {
       ;