@inspecto-dev/core 0.3.4 → 0.3.6

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);
@@ -3117,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";
@@ -3202,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) {
@@ -3797,7 +3870,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
@@ -3810,6 +3887,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";
@@ -3829,7 +3919,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;
@@ -3933,6 +4030,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;
@@ -3947,6 +4064,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,
@@ -4033,25 +4154,36 @@ 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";
   setTimeout(() => input.focus(), 0);
   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();
@@ -4167,15 +4299,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,
@@ -4268,7 +4401,6 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose,
   });
   return cleanup;
 }
-var MENU_WIDTH;
 var init_menu = __esm({
   "src/menu.ts"() {
     "use strict";
@@ -4276,9 +4408,9 @@ var init_menu = __esm({
     init_menu_send();
     init_http();
     init_menu_header();
+    init_menu_position();
     init_menu_helpers();
     init_styles();
-    MENU_WIDTH = 280;
   }
 });
 
@@ -4913,6 +5045,18 @@ function handleMouseMove(ctx, event) {
   state.lastPointerX = event.clientX;
   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;
+  }
   const isActive = state.isInspectorActive(event);
   if (!isActive) {
     state.overlay.hide();
@@ -4934,8 +5078,18 @@ function handleMouseMove(ctx, event) {
   event.stopPropagation();
 }
 function handleTrigger(ctx, event) {
-  var _a2;
   const state = asInteractionContext(ctx);
+  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;
@@ -4954,11 +5108,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) {
@@ -4986,6 +5141,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,
@@ -4993,6 +5149,7 @@ function openInspectMenu(ctx, loc, clientX, clientY, targetElement) {
     clientY,
     state.options,
     () => {
+      state.style.pointerEvents = "none";
       state.cleanupMenu = null;
     },
     {
@@ -5516,11 +5673,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)";
@@ -5533,9 +5693,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"));
@@ -5570,9 +5734,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");
@@ -5580,6 +5747,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";
@@ -6041,6 +6213,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");
@@ -6073,7 +6246,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";
@@ -6113,13 +6286,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;
   }
 });
 
@@ -6147,6 +6325,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;
@@ -6693,7 +6876,7 @@ var init_component = __esm({
         });
       }
     };
-    if (typeof customElements !== "undefined") {
+    if (typeof customElements !== "undefined" && !customElements.get("inspecto-overlay")) {
       customElements.define("inspecto-overlay", InspectoElement);
     }
   }