@inspecto-dev/core 0.3.3 → 0.3.5

package/dist/index.cjs

@@ -1059,7 +1059,9 @@ var init_styles_overlay_menu = __esm({
     border: 1px solid var(--inspecto-border-subtle);
     border-radius: var(--inspecto-radius-lg);
     padding: 10px;
-    min-width: 304px;
+    width: 304px;
+    max-width: calc(100vw - 16px);
+    box-sizing: border-box;
     box-shadow: var(--inspecto-shadow-floating);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     color: var(--inspecto-text-primary);
@@ -3582,6 +3584,113 @@ var init_fix_bug_prompt = __esm({
   }
 });
 
+// src/menu-helpers.ts
+function formatSourceAnchor(location) {
+  const fileName = location.file.split("/").pop() || location.file;
+  return `${fileName}:${location.line}:${location.column}`;
+}
+function formatRuntimeErrorCount2(count) {
+  if (count > 99) return "99+";
+  return String(count);
+}
+function createMenuSection() {
+  const section = document.createElement("div");
+  section.className = menuSectionClass;
+  return section;
+}
+function createAskInput(placeholder) {
+  const inputWrapper = document.createElement("div");
+  inputWrapper.className = menuInputWrapperClass;
+  const input = document.createElement("input");
+  input.className = menuInputClass;
+  input.type = "text";
+  input.placeholder = placeholder != null ? placeholder : "Add a custom ask or extra instruction...";
+  input.setAttribute("aria-label", "Custom ask");
+  const sendIcon = document.createElement("div");
+  sendIcon.className = menuInputIconClass;
+  sendIcon.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`;
+  sendIcon.style.cursor = "pointer";
+  inputWrapper.appendChild(input);
+  inputWrapper.appendChild(sendIcon);
+  return { input, inputWrapper, sendIcon };
+}
+function showError(menu, message, errorCode) {
+  var _a2;
+  (_a2 = menu.querySelector(`.${errorMsgClass}`)) == null ? void 0 : _a2.remove();
+  const errEl = document.createElement("div");
+  errEl.className = errorMsgClass;
+  errEl.textContent = errorCode === "FILE_NOT_FOUND" ? "Source file not found. Is the server running?" : `Error: ${message}`;
+  menu.appendChild(errEl);
+}
+function isFixIntent(intent) {
+  return intent.aiIntent === "fix";
+}
+function isFixUiIntent(intent) {
+  return intent.id === "fix-ui";
+}
+function createRuntimeContextUi(runtimeContext, options) {
+  var _a2;
+  if (!runtimeContext) return null;
+  const summary = formatRuntimeContextSummary(runtimeContext);
+  if (!summary) return null;
+  const container = document.createElement("div");
+  container.style.display = "flex";
+  container.style.flexDirection = "column";
+  container.style.gap = "4px";
+  const summaryEl = document.createElement("div");
+  summaryEl.className = menuContextSummaryClass;
+  summaryEl.textContent = summary;
+  container.appendChild(summaryEl);
+  if (((_a2 = options.runtimeContext) == null ? void 0 : _a2.preview) !== true || runtimeContext.records.length === 0) {
+    return container;
+  }
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = menuContextToggleClass;
+  toggle.textContent = "Show preview";
+  const preview = document.createElement("div");
+  preview.className = menuContextPreviewClass;
+  preview.hidden = true;
+  preview.textContent = formatRuntimeContextPreview(runtimeContext.records);
+  toggle.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    preview.hidden = !preview.hidden;
+    toggle.textContent = preview.hidden ? "Show preview" : "Hide preview";
+  });
+  container.append(toggle, preview);
+  return container;
+}
+function formatRuntimeContextSummary(runtimeContext) {
+  const parts = [];
+  const { runtimeErrorCount, failedRequestCount } = runtimeContext.summary;
+  if (runtimeErrorCount > 0) {
+    parts.push(
+      `${runtimeErrorCount} ${runtimeErrorCount === 1 ? "runtime error" : "runtime errors"}`
+    );
+  }
+  if (failedRequestCount > 0) {
+    parts.push(
+      `${failedRequestCount} ${failedRequestCount === 1 ? "failed request" : "failed requests"}`
+    );
+  }
+  return parts.join(" \u2022 ");
+}
+function formatRuntimeContextPreview(records) {
+  return records.slice(0, 3).map((record) => {
+    var _a2, _b, _c, _d, _e, _f;
+    const details = record.kind === "failed-request" ? `${(_b = (_a2 = record.request) == null ? void 0 : _a2.method) != null ? _b : "GET"} ${(_f = (_e = (_c = record.request) == null ? void 0 : _c.pathname) != null ? _e : (_d = record.request) == null ? void 0 : _d.url) != null ? _f : ""}`.trim() : `${record.occurrenceCount}x`;
+    return `[${record.kind}] ${record.message}
+${details}`;
+  }).join("\n\n");
+}
+var init_menu_helpers = __esm({
+  "src/menu-helpers.ts"() {
+    "use strict";
+    init_styles();
+  }
+});
+
 // src/menu-actions.ts
 function createIntentActionButtons(input) {
   return input.intents.map((intent) => {
@@ -3607,7 +3716,9 @@ function createIntentActionButtons(input) {
         }
         const requestRuntimeContext = input.resolveRuntimeContext(intent);
         const requestScreenshotContext = yield input.resolveScreenshotContext();
-        const requestCssContextPrompt = input.resolveCssContextPrompt();
+        const requestCssContextPrompt = input.resolveCssContextPrompt(
+          isFixUiIntent(intent) ? intent : void 0
+        );
         const prompt = appendCssContextToPrompt(
           appendScreenshotContextToPrompt(
             buildPromptForIntent(intent, input.location, snippetResult, requestRuntimeContext),
@@ -3638,6 +3749,7 @@ var init_menu_actions = __esm({
     init_css_context();
     init_fix_bug_prompt();
     init_http();
+    init_menu_helpers();
     init_styles();
   }
 });
@@ -3687,7 +3799,11 @@ function buildCustomInspectPrompt(input) {
     const prompt = appendCssContextToPrompt(
       appendScreenshotContextToPrompt(
         appendRuntimeContextToPrompt(
-          buildPrompt(CUSTOM_PROMPT_TEMPLATE(input.ask.trim()), input.location, snippetResult),
+          buildPrompt(
+            buildCustomInspectPromptTemplate(input.ask.trim(), input.location, input.targetLabel),
+            input.location,
+            snippetResult
+          ),
           (_b = (_a2 = input.runtimeContext) == null ? void 0 : _a2.records) != null ? _b : []
         ),
         (_c = input.screenshotContext) != null ? _c : null
@@ -3700,6 +3816,19 @@ function buildCustomInspectPrompt(input) {
     };
   });
 }
+function buildCustomInspectPromptTemplate(ask, location, targetLabel) {
+  const sections = [CUSTOM_PROMPT_TEMPLATE(ask)];
+  if (targetLabel == null ? void 0 : targetLabel.trim()) {
+    sections.push(`Selected component:
+- ${targetLabel.trim()}`);
+  }
+  sections.push(
+    `Source location:
+- file: ${location.file}
+- location: ${location.line}:${location.column}`
+  );
+  return sections.join("\n\n");
+}
 var init_menu_send = __esm({
   "src/menu-send.ts"() {
     "use strict";
@@ -3710,110 +3839,6 @@ var init_menu_send = __esm({
   }
 });
 
-// src/menu-helpers.ts
-function formatSourceAnchor(location) {
-  const fileName = location.file.split("/").pop() || location.file;
-  return `${fileName}:${location.line}:${location.column}`;
-}
-function formatRuntimeErrorCount2(count) {
-  if (count > 99) return "99+";
-  return String(count);
-}
-function createMenuSection() {
-  const section = document.createElement("div");
-  section.className = menuSectionClass;
-  return section;
-}
-function createAskInput(placeholder) {
-  const inputWrapper = document.createElement("div");
-  inputWrapper.className = menuInputWrapperClass;
-  const input = document.createElement("input");
-  input.className = menuInputClass;
-  input.type = "text";
-  input.placeholder = placeholder != null ? placeholder : "Add a custom ask or extra instruction...";
-  input.setAttribute("aria-label", "Custom ask");
-  const sendIcon = document.createElement("div");
-  sendIcon.className = menuInputIconClass;
-  sendIcon.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`;
-  sendIcon.style.cursor = "pointer";
-  inputWrapper.appendChild(input);
-  inputWrapper.appendChild(sendIcon);
-  return { input, inputWrapper, sendIcon };
-}
-function showError(menu, message, errorCode) {
-  var _a2;
-  (_a2 = menu.querySelector(`.${errorMsgClass}`)) == null ? void 0 : _a2.remove();
-  const errEl = document.createElement("div");
-  errEl.className = errorMsgClass;
-  errEl.textContent = errorCode === "FILE_NOT_FOUND" ? "Source file not found. Is the server running?" : `Error: ${message}`;
-  menu.appendChild(errEl);
-}
-function isFixIntent(intent) {
-  return intent.aiIntent === "fix";
-}
-function createRuntimeContextUi(runtimeContext, options) {
-  var _a2;
-  if (!runtimeContext) return null;
-  const summary = formatRuntimeContextSummary(runtimeContext);
-  if (!summary) return null;
-  const container = document.createElement("div");
-  container.style.display = "flex";
-  container.style.flexDirection = "column";
-  container.style.gap = "4px";
-  const summaryEl = document.createElement("div");
-  summaryEl.className = menuContextSummaryClass;
-  summaryEl.textContent = summary;
-  container.appendChild(summaryEl);
-  if (((_a2 = options.runtimeContext) == null ? void 0 : _a2.preview) !== true || runtimeContext.records.length === 0) {
-    return container;
-  }
-  const toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = menuContextToggleClass;
-  toggle.textContent = "Show preview";
-  const preview = document.createElement("div");
-  preview.className = menuContextPreviewClass;
-  preview.hidden = true;
-  preview.textContent = formatRuntimeContextPreview(runtimeContext.records);
-  toggle.addEventListener("click", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    preview.hidden = !preview.hidden;
-    toggle.textContent = preview.hidden ? "Show preview" : "Hide preview";
-  });
-  container.append(toggle, preview);
-  return container;
-}
-function formatRuntimeContextSummary(runtimeContext) {
-  const parts = [];
-  const { runtimeErrorCount, failedRequestCount } = runtimeContext.summary;
-  if (runtimeErrorCount > 0) {
-    parts.push(
-      `${runtimeErrorCount} ${runtimeErrorCount === 1 ? "runtime error" : "runtime errors"}`
-    );
-  }
-  if (failedRequestCount > 0) {
-    parts.push(
-      `${failedRequestCount} ${failedRequestCount === 1 ? "failed request" : "failed requests"}`
-    );
-  }
-  return parts.join(" \u2022 ");
-}
-function formatRuntimeContextPreview(records) {
-  return records.slice(0, 3).map((record) => {
-    var _a2, _b, _c, _d, _e, _f;
-    const details = record.kind === "failed-request" ? `${(_b = (_a2 = record.request) == null ? void 0 : _a2.method) != null ? _b : "GET"} ${(_f = (_e = (_c = record.request) == null ? void 0 : _c.pathname) != null ? _e : (_d = record.request) == null ? void 0 : _d.url) != null ? _f : ""}`.trim() : `${record.occurrenceCount}x`;
-    return `[${record.kind}] ${record.message}
-${details}`;
-  }).join("\n\n");
-}
-var init_menu_helpers = __esm({
-  "src/menu-helpers.ts"() {
-    "use strict";
-    init_styles();
-  }
-});
-
 // src/menu-header.ts
 function createMenuHeaderDom(input) {
   var _a2;
@@ -3823,7 +3848,14 @@ function createMenuHeaderDom(input) {
   headerCopy.style.display = "flex";
   headerCopy.style.flexDirection = "column";
   headerCopy.style.gap = "2px";
+  headerCopy.style.minWidth = "0";
+  headerCopy.style.flex = "1 1 auto";
   const title = document.createElement("strong");
+  title.style.display = "block";
+  title.style.minWidth = "0";
+  title.style.whiteSpace = "nowrap";
+  title.style.overflow = "hidden";
+  title.style.textOverflow = "ellipsis";
   title.textContent = ((_a2 = input.targetLabel) == null ? void 0 : _a2.trim()) || input.location.file.split("/").pop() || input.location.file;
   const meta = document.createElement("div");
   meta.className = menuMetaClass;
@@ -3927,6 +3959,26 @@ var init_menu_header = __esm({
   }
 });
 
+// src/menu-position.ts
+function resolveMenuPosition(input) {
+  var _a2;
+  const edgeMargin = (_a2 = input.edgeMargin) != null ? _a2 : DEFAULT_EDGE_MARGIN;
+  const safeWidth = input.viewport.width > 0 ? input.viewport.width : input.menuRect.width + edgeMargin * 2;
+  const safeHeight = input.viewport.height > 0 ? input.viewport.height : input.menuRect.height + edgeMargin * 2;
+  const maxLeft = Math.max(safeWidth - input.menuRect.width - edgeMargin, edgeMargin);
+  const left = Math.max(edgeMargin, Math.min(input.clickX, maxLeft));
+  const maxTop = Math.max(safeHeight - input.menuRect.height - edgeMargin, edgeMargin);
+  const top = Math.max(edgeMargin, Math.min(input.clickY + edgeMargin, maxTop));
+  return { left, top };
+}
+var DEFAULT_EDGE_MARGIN;
+var init_menu_position = __esm({
+  "src/menu-position.ts"() {
+    "use strict";
+    DEFAULT_EDGE_MARGIN = 8;
+  }
+});
+
 // src/menu.ts
 function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose, deps = {}) {
   var _a2, _b, _c;
@@ -3941,6 +3993,10 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
   const canAttachCssContext2 = typeof deps.captureCssContextPrompt === "function";
   const menu = document.createElement("div");
   menu.className = menuClass;
+  menu.style.width = "304px";
+  menu.style.maxWidth = "calc(100vw - 16px)";
+  menu.style.boxSizing = "border-box";
+  menu.style.pointerEvents = "auto";
   const {
     header,
     headerActions,
@@ -4027,20 +4083,23 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
   menu.appendChild(askAiSection);
   const actionsSection = createMenuSection();
   menu.appendChild(actionsSection);
-  const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-  const safeWidth = viewportWidth > 0 ? viewportWidth : MENU_WIDTH;
-  menu.style.left = `${Math.min(clickX, Math.max(safeWidth - MENU_WIDTH, 0))}px`;
+  menu.style.left = `${clickX}px`;
   menu.style.visibility = "hidden";
   menu.style.display = "block";
   shadowRoot.appendChild(menu);
   const updatePosition = () => {
     const rect = menu.getBoundingClientRect();
-    const viewportHeight = Math.max(
-      document.documentElement.clientHeight || 0,
-      window.innerHeight || 0
-    );
-    const safeHeight = viewportHeight > 0 ? viewportHeight : rect.height + 16;
-    menu.style.top = `${Math.min(clickY + 8, Math.max(safeHeight - rect.height - 8, 0))}px`;
+    const { left: nextLeft, top: nextTop } = resolveMenuPosition({
+      clickX,
+      clickY,
+      menuRect: { width: rect.width, height: rect.height },
+      viewport: {
+        width: document.documentElement.clientWidth || window.innerWidth || 0,
+        height: document.documentElement.clientHeight || window.innerHeight || 0
+      }
+    });
+    menu.style.left = `${nextLeft}px`;
+    menu.style.top = `${nextTop}px`;
   };
   updatePosition();
   menu.style.visibility = "visible";
@@ -4143,9 +4202,10 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
       return null;
     }
   });
-  const resolveCssContextPrompt = () => {
+  const resolveCssContextPrompt = (intent) => {
     var _a3, _b2;
-    if (!cssContextEnabled) return null;
+    const shouldAttachCssContext = cssContextEnabled || Boolean(intent && isFixUiIntent(intent));
+    if (!shouldAttachCssContext) return null;
     try {
       return (_b2 = (_a3 = deps.captureCssContextPrompt) == null ? void 0 : _a3.call(deps)) != null ? _b2 : null;
     } catch (e) {
@@ -4160,15 +4220,16 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
       const requestRuntimeContext = resolveRuntimeContext();
       const requestScreenshotContext = yield resolveScreenshotContext();
       const requestCssContextPrompt = resolveCssContextPrompt();
-      const built = yield buildCustomInspectPrompt({
+      const built = yield buildCustomInspectPrompt(__spreadProps(__spreadValues({
         location,
-        ask: input.value.trim(),
+        ask: input.value.trim()
+      }, deps.targetLabel ? { targetLabel: deps.targetLabel } : {}), {
         includeSnippet,
         maxSnippetLines,
         runtimeContext: requestRuntimeContext,
         screenshotContext: requestScreenshotContext,
         cssContextPrompt: requestCssContextPrompt
-      });
+      }));
       yield openAndSendInspectPrompt({
         location,
         promptText: built.prompt,
@@ -4261,7 +4322,6 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
   });
   return cleanup;
 }
-var MENU_WIDTH;
 var init_menu = __esm({
   "src/menu.ts"() {
     "use strict";
@@ -4269,9 +4329,9 @@ var init_menu = __esm({
     init_menu_send();
     init_http();
     init_menu_header();
+    init_menu_position();
     init_menu_helpers();
     init_styles();
-    MENU_WIDTH = 280;
   }
 });
 
@@ -4906,6 +4966,10 @@ function handleMouseMove(ctx, event) {
   state.lastPointerX = event.clientX;
   state.lastPointerY = event.clientY;
   state.updateLauncherEye();
+  if (state.cleanupMenu !== null) {
+    state.overlay.hide();
+    return;
+  }
   const isActive = state.isInspectorActive(event);
   if (!isActive) {
     state.overlay.hide();
@@ -4927,8 +4991,8 @@ function handleMouseMove(ctx, event) {
   event.stopPropagation();
 }
 function handleTrigger(ctx, event) {
-  var _a2;
   const state = asInteractionContext(ctx);
+  if (state.cleanupMenu !== null) return;
   if (!state.isInspectorActive(event)) return;
   const target = findInspectable(event.target);
   if (!target) return;
@@ -4947,11 +5011,12 @@ function handleTrigger(ctx, event) {
     return;
   }
   if (state.shouldQuickJumpOnTrigger(event)) {
-    (_a2 = state.cleanupMenu) == null ? void 0 : _a2.call(state);
+    state.overlay.hide();
     state.cleanupMenu = null;
     void openFile(loc);
     return;
   }
+  state.overlay.hide();
   state.openInspectMenu(loc, event.clientX, event.clientY, target);
 }
 function handleKeyDown(ctx, event) {
@@ -4979,6 +5044,7 @@ function openInspectMenu(ctx, loc, clientX, clientY, targetElement) {
   var _a2, _b;
   const state = asInteractionContext(ctx);
   (_a2 = state.cleanupMenu) == null ? void 0 : _a2.call(state);
+  state.style.pointerEvents = "auto";
   state.cleanupMenu = showIntentMenu(
     state.shadowRootEl,
     loc,
@@ -4986,6 +5052,7 @@ function openInspectMenu(ctx, loc, clientX, clientY, targetElement) {
     clientY,
     state.options,
     () => {
+      state.style.pointerEvents = "none";
       state.cleanupMenu = null;
     },
     {
@@ -5509,11 +5576,14 @@ function createAnnotateSidebarRenderers({
       titleEl.style.letterSpacing = "0.04em";
       titleEl.textContent = title;
       const contentEl = document.createElement("div");
+      contentEl.style.minWidth = "0";
+      contentEl.style.whiteSpace = "normal";
+      contentEl.style.overflowWrap = "anywhere";
+      contentEl.style.wordBreak = "break-word";
       if (typeof content === "string") {
         contentEl.style.fontSize = "13px";
         contentEl.style.color = "rgba(255, 255, 255, 0.9)";
         contentEl.style.lineHeight = "1.4";
-        contentEl.style.wordBreak = "break-word";
         if (title === "NOTE" && !chip.note.trim()) {
           contentEl.style.fontStyle = "italic";
           contentEl.style.color = "rgba(255, 255, 255, 0.4)";
@@ -5526,9 +5596,13 @@ function createAnnotateSidebarRenderers({
       return section;
     };
     const elementValue = document.createElement("div");
+    elementValue.style.minWidth = "0";
     elementValue.style.fontFamily = "monospace";
     elementValue.style.fontSize = "13px";
     elementValue.style.color = "#9cdcfe";
+    elementValue.style.whiteSpace = "normal";
+    elementValue.style.overflowWrap = "anywhere";
+    elementValue.style.wordBreak = "break-word";
     elementValue.textContent = chip.label;
     activeTooltip.appendChild(createSection("ELEMENT", elementValue));
     activeTooltip.appendChild(createSection("NOTE", chip.note.trim() || "No note provided"));
@@ -5563,9 +5637,12 @@ function createAnnotateSidebarRenderers({
     chipElement.className = annotateSidebarChipClass;
     chipElement.contentEditable = "false";
     chipElement.style.margin = "0 4px";
+    chipElement.style.boxSizing = "border-box";
     chipElement.style.display = "inline-flex";
     chipElement.style.alignItems = "center";
     chipElement.style.gap = "5px";
+    chipElement.style.minWidth = "0";
+    chipElement.style.maxWidth = "calc(100% - 8px)";
     chipElement.style.verticalAlign = "middle";
     chipElement.tabIndex = 0;
     chipElement.setAttribute("role", "button");
@@ -5573,6 +5650,11 @@ function createAnnotateSidebarRenderers({
     chipElement.dataset.state = chip.state;
     const label = document.createElement("span");
     label.dataset.annotateChipLabel = "true";
+    label.style.flex = "1 1 auto";
+    label.style.minWidth = "0";
+    label.style.overflow = "hidden";
+    label.style.textOverflow = "ellipsis";
+    label.style.whiteSpace = "nowrap";
     label.textContent = chip.label;
     const actionSlot = document.createElement("span");
     actionSlot.style.position = "relative";
@@ -6066,7 +6148,7 @@ function createOverlay(shadowRoot) {
     tagSpan.textContent = tagName;
     idSpan.textContent = el.id ? `#${el.id}` : "";
     const classes = Array.from(el.classList).map((c) => `.${c}`).join("");
-    classSpan.textContent = classes;
+    classSpan.textContent = summarizeClasses(classes);
     dimSpan.textContent = `${Math.round(rect.width)} \xD7 ${Math.round(rect.height)}`;
     sourceSpan.textContent = sourceLabel;
     tooltip.style.visibility = "hidden";
@@ -6106,13 +6188,18 @@ function createOverlay(shadowRoot) {
   }
   return { show, hide };
 }
-var GAP, EDGE_MARGIN;
+function summarizeClasses(classes) {
+  if (classes.length <= MAX_CLASS_SUMMARY_LENGTH) return classes;
+  return `${classes.slice(0, MAX_CLASS_SUMMARY_LENGTH - 3)}...`;
+}
+var GAP, EDGE_MARGIN, MAX_CLASS_SUMMARY_LENGTH;
 var init_overlay = __esm({
   "src/overlay.ts"() {
     "use strict";
     init_styles();
     GAP = 8;
     EDGE_MARGIN = 4;
+    MAX_CLASS_SUMMARY_LENGTH = 96;
   }
 });
 
@@ -6140,6 +6227,11 @@ function resetAnnotateState(state) {
 }
 function connect(ctx, createAnnotateOverlay2) {
   const state = asLifecycleContext(ctx);
+  const host = state;
+  host.style.position = "fixed";
+  host.style.inset = "0";
+  host.style.pointerEvents = "none";
+  host.style.zIndex = "2147483646";
   state.shadowRootEl = state.attachShadow({ mode: "open" });
   const style = document.createElement("style");
   style.textContent = inspectorStyles;
@@ -6686,7 +6778,7 @@ var init_component = __esm({
         });
       }
     };
-    if (typeof customElements !== "undefined") {
+    if (typeof customElements !== "undefined" && !customElements.get("inspecto-overlay")) {
       customElements.define("inspecto-overlay", InspectoElement);
     }
   }