@inspecto-dev/core 0.2.0-alpha.1 → 0.2.0-alpha.3

package/dist/index.cjs

@@ -3,6 +3,9 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,37 +19,52 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  InspectoElement: () => InspectoElement,
-  mountInspector: () => mountInspector,
-  unmountInspector: () => unmountInspector
-});
-module.exports = __toCommonJS(src_exports);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/styles.ts
-var overlayClass = "inspecto-overlay";
-var menuClass = "inspecto-menu";
-var menuItemClass = "inspecto-menu-item";
-var loadingSpinnerClass = "inspecto-spinner";
-var errorMsgClass = "inspecto-error";
-var badgeClass = "inspecto-badge";
-var menuInputClass = "inspecto-menu-input";
-var menuInputWrapperClass = "inspecto-menu-input-wrapper";
-var menuInputIconClass = "inspecto-menu-input-icon";
-var tooltipClass = "inspecto-tooltip";
-var tooltipTopClass = "inspecto-tooltip-top";
-var tooltipBottomClass = "inspecto-tooltip-bottom";
-var tagClass = "inspecto-tag";
-var idClass = "inspecto-id";
-var classClass = "inspecto-class";
-var dimClass = "inspecto-dim";
-var separatorClass = "inspecto-separator";
-var sourceClass = "inspecto-source";
-var shortcutIconClass = "ai-shortcut-icon";
-var darkVars = `
+var overlayClass, menuClass, menuItemClass, loadingSpinnerClass, errorMsgClass, badgeClass, menuInputClass, menuInputWrapperClass, menuInputIconClass, tooltipClass, tooltipTopClass, tooltipBottomClass, tagClass, idClass, classClass, dimClass, separatorClass, sourceClass, shortcutIconClass, darkVars, inspectorStyles;
+var init_styles = __esm({
+  "src/styles.ts"() {
+    "use strict";
+    overlayClass = "inspecto-overlay";
+    menuClass = "inspecto-menu";
+    menuItemClass = "inspecto-menu-item";
+    loadingSpinnerClass = "inspecto-spinner";
+    errorMsgClass = "inspecto-error";
+    badgeClass = "inspecto-badge";
+    menuInputClass = "inspecto-menu-input";
+    menuInputWrapperClass = "inspecto-menu-input-wrapper";
+    menuInputIconClass = "inspecto-menu-input-icon";
+    tooltipClass = "inspecto-tooltip";
+    tooltipTopClass = "inspecto-tooltip-top";
+    tooltipBottomClass = "inspecto-tooltip-bottom";
+    tagClass = "inspecto-tag";
+    idClass = "inspecto-id";
+    classClass = "inspecto-class";
+    dimClass = "inspecto-dim";
+    separatorClass = "inspecto-separator";
+    sourceClass = "inspecto-source";
+    shortcutIconClass = "ai-shortcut-icon";
+    darkVars = `
   --inspecto-menu-bg: #252526;
   --inspecto-menu-border: #454545;
   --inspecto-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -74,7 +92,7 @@ var darkVars = `
   --inspecto-dim-color: #858585;
   --inspecto-error-color: #ef4444;
 `;
-var inspectorStyles = `
+    inspectorStyles = `
   :host {
     /* Light theme (default) */
     --inspecto-menu-bg: #ffffff;
@@ -413,10 +431,10 @@ var inspectorStyles = `
     opacity: 1;
   }
 `;
+  }
+});
 
 // src/overlay.ts
-var GAP = 8;
-var EDGE_MARGIN = 4;
 function createOverlay(shadowRoot) {
   const overlay = document.createElement("div");
   overlay.className = overlayClass;
@@ -495,138 +513,23 @@ function createOverlay(shadowRoot) {
   }
   return { show, hide };
 }
+var GAP, EDGE_MARGIN;
+var init_overlay = __esm({
+  "src/overlay.ts"() {
+    "use strict";
+    init_styles();
+    GAP = 8;
+    EDGE_MARGIN = 4;
+  }
+});
 
 // src/intents.ts
 function CUSTOM_PROMPT_TEMPLATE(userPrompt) {
   return userPrompt;
 }
-var DEFAULT_INTENTS = [
-  // ── 1. Explain Component ─────────────────────────────────────────────────
-  // Frequency: ★★★★★ — Most common action when navigating unfamiliar codebases
-  {
-    id: "explain",
-    label: "Explain Component",
-    prompt: `The following is a {{framework}} component from \`{{file}}\` (line {{line}}).
-
-Please explain:
-
-1. What this component does and its responsibility in the UI
-2. Key props and their purpose
-3. Important state or side effects (if applicable)
-4. Any non-obvious logic or edge cases worth noting`
-  },
-  // ── 2. Fix Bug ───────────────────────────────────────────────────────────
-  // Frequency: ★★★★★ — Debugging is the highest time-cost activity in frontend dev
-  {
-    id: "fix-bug",
-    label: "Fix Bug",
-    prompt: `I found a bug in the following {{framework}} component from \`{{file}}\` (line {{line}}).
-
-Please:
-
-1. Identify potential bugs or issues in this code
-2. Explain the root cause of each issue
-3. Provide a fixed version with minimal changes
-
-If you need more context (e.g. parent component, API response shape),
-please ask before suggesting a fix.`
-  },
-  // ── 3. Fix Styles ────────────────────────────────────────────────────────
-  // Frequency: ★★★★ — Styling issues are top-3 daily pain points for frontend devs
-  {
-    id: "fix-styles",
-    label: "Fix Styles",
-    prompt: `The following component from \`{{file}}\` (line {{line}}) has a styling issue.
-
-Please:
-
-1. Review the current styles (className / inline styles / CSS-in-JS / Style blocks)
-2. Identify common issues: layout shifts, overflow, z-index conflicts,
-   responsive breakpoints, or visual inconsistencies
-3. Suggest fixes using the same styling approach already in use
-
-Note: Maintain the existing styling conventions (e.g. Tailwind, CSS Modules, scoped styles).`
-  },
-  // ── 4. Refactor Component ────────────────────────────────────────────────
-  // Frequency: ★★★★ — Sustained demand after features stabilize; large component splits
-  {
-    id: "refactor",
-    label: "Refactor Component",
-    prompt: `Please refactor the following {{framework}} component from \`{{file}}\` (line {{line}}).
-
-Refactoring goals (apply as relevant):
-
-- Extract reusable sub-components or composables/hooks
-- Improve readability and reduce complexity
-- Remove redundant state or unnecessary re-renders
-- Apply {{framework}} best practices
-- Maintain existing behavior \u2014 no functional changes
-
-Please show the refactored version with a brief explanation of each change.`
-  },
-  // ── 5. Code Review ───────────────────────────────────────────────────────
-  // Frequency: ★★★ — Concentrated at PR stage; slightly less frequent than daily fixes
-  {
-    id: "code-review",
-    label: "Code Review",
-    prompt: `Please do a code review for the following {{framework}} component from \`{{file}}\` (line {{line}}).
-
-Review dimensions:
-
-- Correctness: logic errors, edge cases, race conditions
-- {{framework}} best practices: lifecycle usage, key props, reactivity rules
-- Performance: unnecessary renders, missing memoization
-- Accessibility: ARIA attributes, keyboard navigation, semantic HTML
-- Security: XSS risks, unsafe HTML injection, user input handling
-- Maintainability: naming clarity, code duplication, complexity
-
-Format your response as a prioritized list: \u{1F534} Critical / \u{1F7E1} Warning / \u{1F7E2} Suggestion.`
-  },
-  // ── 6. Generate Test ─────────────────────────────────────────────────────
-  // Frequency: ★★★ — Common but often deferred; great AI use case
-  {
-    id: "generate-test",
-    label: "Generate Test",
-    prompt: `Please generate unit tests for the following {{framework}} component from \`{{file}}\` (line {{line}}).
-
-Requirements:
-
-- Use Vitest + Testing Library (or Jest if the codebase implies it)
-- Cover: render correctness, user interactions, edge cases, error states
-- Mock external dependencies (API calls, context/providers, router)
-- Use accessible queries (getByRole, getByLabelText) over getByTestId
-
-Generate a complete, runnable test file. Include all import statements.`
-  },
-  // ── 7. Performance Analysis ──────────────────────────────────────────────
-  // Frequency: ★★ — Targeted use during perf sprints; not a daily operation
-  {
-    id: "performance",
-    label: "Performance Analysis",
-    prompt: `Please analyze the performance of the following {{framework}} component from \`{{file}}\` (line {{line}}).
-
-Focus on:
-
-1. Unnecessary re-renders or reactive updates
-2. Expensive computations that should be memoized/computed
-3. Heavy operations in the render path
-4. Dependency arrays or watchers \u2014 missing or over-specified
-5. Large bundle impact (heavy imports that could be lazy-loaded)
-
-For each issue found, provide: problem description \u2192 recommended fix \u2192 expected impact.`
-  },
-  // ── 8. Open in Editor ────────────────────────────────────────────────────
-  // Type: local action (no AI prompt) — jumps directly to source in IDE
-  {
-    id: "open-in-editor",
-    label: "Open in Editor",
-    prompt: "",
-    // unused — isAction handles this
-    isAction: true
-  }
-];
 function detectFramework(fileName) {
-  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+  var _a;
+  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
   switch (ext) {
     case "vue":
       return "Vue";
@@ -645,12 +548,13 @@ function detectFramework(fileName) {
   }
 }
 function buildPrompt(template, location, snippetResult) {
-  const shortFile = location.file.split("/").pop() ?? location.file;
-  const ext = shortFile.split(".").pop()?.toLowerCase() || "tsx";
+  var _a, _b, _c;
+  const shortFile = (_a = location.file.split("/").pop()) != null ? _a : location.file;
+  const ext = ((_b = shortFile.split(".").pop()) == null ? void 0 : _b.toLowerCase()) || "tsx";
   const framework = detectFramework(shortFile);
   let finalPrompt = template.replace(/\{\{file\}\}/g, location.file).replace(/\{\{line\}\}/g, String(location.line)).replace(/\{\{column\}\}/g, String(location.column)).replace(/\{\{ext\}\}/g, ext).replace(/\{\{framework\}\}/g, framework).replace(/\{\{name\}\}/g, shortFile);
   if (snippetResult && snippetResult.snippet) {
-    const name = snippetResult.name ?? shortFile;
+    const name = (_c = snippetResult.name) != null ? _c : shortFile;
     finalPrompt = finalPrompt.replace(/\{\{name\}\}/g, name);
     finalPrompt += `
 
@@ -661,72 +565,93 @@ ${snippetResult.snippet}
   }
   return finalPrompt;
 }
+var init_intents = __esm({
+  "src/intents.ts"() {
+    "use strict";
+  }
+});
 
 // src/http.ts
-var BASE_URL = globalThis.__AI_INSPECTOR_SERVER_URL__ || "http://127.0.0.1:5678";
 function setBaseUrl(url) {
   BASE_URL = url.replace(/\/$/, "");
 }
-var cachedConfig = null;
-async function fetchIdeInfo(force = false) {
-  if (cachedConfig && !force) return cachedConfig;
-  try {
-    const res = await fetch(`${BASE_URL}/config`);
-    if (!res.ok) return null;
-    cachedConfig = await res.json();
-    return cachedConfig;
-  } catch {
-    return null;
-  }
+function fetchIdeInfo(force = false) {
+  return __async(this, null, function* () {
+    if (cachedConfig && !force) return cachedConfig;
+    try {
+      const res = yield fetch(`${BASE_URL}${import_types.INSPECTO_API_PATHS.CLIENT_CONFIG}`);
+      if (!res.ok) return null;
+      cachedConfig = yield res.json();
+      return cachedConfig;
+    } catch (e) {
+      return null;
+    }
+  });
 }
-async function openFile(req) {
-  try {
-    const res = await fetch(`${BASE_URL}/open`, {
+function openFile(req) {
+  return __async(this, null, function* () {
+    try {
+      const res = yield fetch(`${BASE_URL}${import_types.INSPECTO_API_PATHS.IDE_OPEN}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(req)
+      });
+      return res.ok;
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function fetchSnippet(file, line, column, maxLines = 100) {
+  return __async(this, null, function* () {
+    const params = new URLSearchParams({
+      file,
+      line: String(line),
+      column: String(column),
+      maxLines: String(maxLines)
+    });
+    const res = yield fetch(`${BASE_URL}${import_types.INSPECTO_API_PATHS.PROJECT_SNIPPET}?${params}`);
+    if (!res.ok) {
+      const err = yield res.json().catch(() => ({}));
+      throw Object.assign(new Error("snippet fetch failed"), { errorCode: err.errorCode });
+    }
+    return res.json();
+  });
+}
+function sendToAi(req) {
+  return __async(this, null, function* () {
+    var _a;
+    const res = yield fetch(`${BASE_URL}${import_types.INSPECTO_API_PATHS.AI_DISPATCH}`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(req)
     });
-    return res.ok;
-  } catch {
-    return false;
-  }
-}
-async function fetchSnippet(file, line, column, maxLines = 100) {
-  const params = new URLSearchParams({
-    file,
-    line: String(line),
-    column: String(column),
-    maxLines: String(maxLines)
+    if (!res.ok) {
+      const err = yield res.json().catch(() => ({}));
+      return {
+        success: false,
+        error: (_a = err.error) != null ? _a : "Request failed",
+        errorCode: err.errorCode
+      };
+    }
+    return res.json();
   });
-  const res = await fetch(`${BASE_URL}/snippet?${params}`);
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({}));
-    throw Object.assign(new Error("snippet fetch failed"), { errorCode: err.errorCode });
-  }
-  return res.json();
 }
-async function sendToAi(req) {
-  const res = await fetch(`${BASE_URL}/send-to-ai`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(req)
-  });
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({}));
-    return {
-      success: false,
-      error: err.error ?? "Request failed",
-      errorCode: err.errorCode
-    };
+var import_types, BASE_URL, cachedConfig;
+var init_http = __esm({
+  "src/http.ts"() {
+    "use strict";
+    import_types = require("@inspecto-dev/types");
+    BASE_URL = globalThis.__AI_INSPECTOR_SERVER_URL__ || "http://127.0.0.1:5678";
+    cachedConfig = null;
   }
-  return res.json();
-}
+});
 
 // src/menu.ts
-var MENU_WIDTH = 280;
 function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose) {
-  const maxSnippetLines = options.maxSnippetLines ?? 100;
-  const includeSnippet = options.includeSnippet ?? false;
+  var _a, _b;
+  const maxSnippetLines = (_a = options.maxSnippetLines) != null ? _a : 100;
+  const includeSnippet = (_b = options.includeSnippet) != null ? _b : false;
   const menu = document.createElement("div");
   menu.className = menuClass;
   const { input, inputWrapper, sendIcon } = createAskInput(options.askPlaceholder);
@@ -761,26 +686,33 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose)
     menu.remove();
     onClose();
   }
-  const handleSend = async (promptText, snippetText, disable, restore) => {
+  const handleSend = (promptText, snippetText, disable, restore) => __async(null, null, function* () {
+    var _a2, _b2;
     disable();
-    await openFile(location);
-    await new Promise((r) => setTimeout(r, 100));
-    const result = await sendToAi({ location, snippet: snippetText, prompt: promptText });
+    yield openFile(location);
+    yield new Promise((r) => setTimeout(r, 100));
+    const result = yield sendToAi({ location, snippet: snippetText, prompt: promptText });
     if (result.success) {
+      if ((_a2 = result.fallbackPayload) == null ? void 0 : _a2.prompt) {
+        try {
+          yield navigator.clipboard.writeText(result.fallbackPayload.prompt);
+        } catch (e) {
+        }
+      }
       cleanup();
     } else {
       restore();
-      showError(menu, result.error ?? "Unknown error", result.errorCode);
+      showError(menu, (_b2 = result.error) != null ? _b2 : "Unknown error", result.errorCode);
     }
-  };
-  const submitAsk = async () => {
+  });
+  const submitAsk = () => __async(null, null, function* () {
     if (!input.value.trim()) return;
     input.disabled = true;
     sendIcon.style.pointerEvents = "none";
     try {
       let snippetResult = null;
       if (includeSnippet) {
-        snippetResult = await fetchSnippet(
+        snippetResult = yield fetchSnippet(
           location.file,
           location.line,
           location.column,
@@ -792,9 +724,9 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose)
         location,
         snippetResult
       );
-      await handleSend(
+      yield handleSend(
         prompt,
-        snippetResult?.snippet || "",
+        (snippetResult == null ? void 0 : snippetResult.snippet) || "",
         () => {
         },
         // already disabled
@@ -808,20 +740,21 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose)
       sendIcon.style.pointerEvents = "auto";
       showError(menu, err.message, err.errorCode);
     }
-  };
+  });
   input.addEventListener("keydown", (e) => {
     if (e.key === "Enter") submitAsk();
   });
   sendIcon.addEventListener("click", submitAsk);
   fetchIdeInfo().then((ideInfo) => {
+    var _a2, _b2, _c, _d;
     loadingEl.remove();
-    const intents = resolveIntents(ideInfo?.prompts);
+    const intents = (ideInfo == null ? void 0 : ideInfo.prompts) || [];
     for (const intent of intents) {
       if (intent.isAction && intent.id === "open-in-editor") {
         const btn2 = document.createElement("button");
         btn2.className = menuItemClass;
         const span = document.createElement("span");
-        span.textContent = intent.label ?? "Unknown";
+        span.textContent = (_a2 = intent.label) != null ? _a2 : "Unknown";
         btn2.appendChild(span);
         const shortcutDiv = document.createElement("div");
         shortcutDiv.className = shortcutIconClass;
@@ -835,23 +768,23 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose)
         menu.appendChild(btn2);
         continue;
       }
-      let fullPromptTemplate = intent.prompt ?? "";
+      let fullPromptTemplate = (_b2 = intent.prompt) != null ? _b2 : "";
       if (intent.prependPrompt)
         fullPromptTemplate = intent.prependPrompt + "\n\n" + fullPromptTemplate;
       if (intent.appendPrompt)
         fullPromptTemplate = fullPromptTemplate + "\n\n" + intent.appendPrompt;
-      const label = intent.label ?? intent.id ?? "Unknown";
+      const label = (_d = (_c = intent.label) != null ? _c : intent.id) != null ? _d : "Unknown";
       const btn = document.createElement("button");
       btn.className = menuItemClass;
       btn.textContent = label;
-      btn.addEventListener("click", async (e) => {
+      btn.addEventListener("click", (e) => __async(null, null, function* () {
         e.stopPropagation();
         btn.disabled = true;
         btn.textContent = "Sending...";
         try {
           let snippetResult = null;
           if (includeSnippet) {
-            snippetResult = await fetchSnippet(
+            snippetResult = yield fetchSnippet(
               location.file,
               location.line,
               location.column,
@@ -859,9 +792,9 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose)
             );
           }
           const prompt = buildPrompt(fullPromptTemplate, location, snippetResult);
-          await handleSend(
+          yield handleSend(
             prompt,
-            snippetResult?.snippet || "",
+            (snippetResult == null ? void 0 : snippetResult.snippet) || "",
             () => {
             },
             // already disabled
@@ -875,117 +808,30 @@ function showIntentMenu(shadowRoot, location, clickX, clickY, options, onClose)
           btn.textContent = label;
           showError(menu, err.message, err.errorCode);
         }
-      });
+      }));
       menu.appendChild(btn);
     }
     updatePosition();
   }).catch((err) => {
+    var _a2;
     loadingEl.remove();
     const isServerDown = err instanceof TypeError;
     showError(
       menu,
       isServerDown ? "Cannot connect to inspector server. Is the dev server running?" : err.message,
-      err.errorCode ?? "UNKNOWN"
+      (_a2 = err.errorCode) != null ? _a2 : "UNKNOWN"
     );
     updatePosition();
   });
   return cleanup;
 }
-function resolveIntents(serverPrompts) {
-  const baseMap = /* @__PURE__ */ new Map();
-  for (const intent of DEFAULT_INTENTS) {
-    if (intent.id) baseMap.set(intent.id, { ...intent });
-  }
-  const defaults = () => ensureOpenInEditorLast(Array.from(baseMap.values()));
-  if (!serverPrompts) return defaults();
-  const isReplace = !Array.isArray(serverPrompts) && typeof serverPrompts === "object" && serverPrompts.$replace === true;
-  const promptsArray = Array.isArray(serverPrompts) ? serverPrompts : isReplace ? serverPrompts.items : [];
-  if (!promptsArray || promptsArray.length === 0) return defaults();
-  if (isReplace) {
-    const result = [];
-    for (const item of promptsArray) {
-      if (typeof item === "string") {
-        if (baseMap.has(item)) {
-          result.push(baseMap.get(item));
-        } else {
-          console.warn(
-            `[inspecto] Unknown built-in intent id: "${item}". Available: ${[...baseMap.keys()].join(", ")}`
-          );
-        }
-      } else if (typeof item === "object") {
-        if (!item.id) {
-          console.warn('[inspecto] Intent object missing required "id" field, skipping.');
-          continue;
-        }
-        if (item.enabled === false) {
-          console.warn(
-            `[inspecto] Intent "${item.id}" is listed in $replace but has enabled:false \u2014 it will be excluded.`
-          );
-          continue;
-        }
-        if (item.isAction && item.id !== "open-in-editor") {
-          console.warn(
-            `[inspecto] isAction is reserved for built-in actions. Ignoring intent "${item.id}".`
-          );
-          continue;
-        }
-        result.push(baseMap.has(item.id) ? { ...baseMap.get(item.id), ...item } : item);
-      }
-    }
-    return ensureOpenInEditorLast(result);
-  }
-  const merged = Array.from(baseMap.values());
-  for (const item of promptsArray) {
-    if (typeof item === "string") {
-      if (!baseMap.has(item)) {
-        console.warn(
-          `[inspecto] Unknown built-in intent id: "${item}". In append mode, strings have no effect on ordering \u2014 use $replace to control order.`
-        );
-      }
-      continue;
-    }
-    if (typeof item === "object") {
-      if (!item.id) {
-        console.warn('[inspecto] Intent object missing required "id" field, skipping.');
-        continue;
-      }
-      if (item.isAction && item.id !== "open-in-editor") {
-        console.warn(
-          `[inspecto] isAction is reserved for built-in actions. Ignoring intent "${item.id}".`
-        );
-        continue;
-      }
-      const existingIdx = merged.findIndex((i) => i.id === item.id);
-      if (existingIdx !== -1) {
-        if (item.enabled === false) {
-          merged.splice(existingIdx, 1);
-        } else {
-          merged[existingIdx] = { ...merged[existingIdx], ...item };
-        }
-      } else {
-        if (item.enabled !== false) {
-          merged.push(item);
-        }
-      }
-    }
-  }
-  return ensureOpenInEditorLast(merged);
-}
-function ensureOpenInEditorLast(intents) {
-  const idx = intents.findIndex((i) => i.id === "open-in-editor");
-  if (idx === -1 || idx === intents.length - 1) return intents;
-  const result = [...intents];
-  const item = result.splice(idx, 1)[0];
-  result.push(item);
-  return result;
-}
 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 ?? "Describe how to change this component...";
+  input.placeholder = placeholder != null ? placeholder : "Describe how to change this component...";
   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>`;
@@ -995,15 +841,29 @@ function createAskInput(placeholder) {
   return { input, inputWrapper, sendIcon };
 }
 function showError(menu, message, errorCode) {
-  menu.querySelector(`.${errorMsgClass}`)?.remove();
+  var _a;
+  (_a = menu.querySelector(`.${errorMsgClass}`)) == null ? void 0 : _a.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);
 }
+var MENU_WIDTH;
+var init_menu = __esm({
+  "src/menu.ts"() {
+    "use strict";
+    init_intents();
+    init_http();
+    init_styles();
+    MENU_WIDTH = 280;
+  }
+});
 
 // src/component.ts
-var ATTR_NAME = "data-inspecto";
+var component_exports = {};
+__export(component_exports, {
+  InspectoElement: () => InspectoElement
+});
 function parseAttrValue(value) {
   const parts = value.split(":");
   if (parts.length < 3) return null;
@@ -1020,277 +880,329 @@ function findInspectable(el) {
   }
   return null;
 }
+function parseHotKeyString(hotKey) {
+  const keys = hotKey.split("+").map((k) => k.trim().toLowerCase());
+  const result = [];
+  if (keys.includes("alt") || keys.includes("option")) result.push("altKey");
+  if (keys.includes("ctrl") || keys.includes("control")) result.push("ctrlKey");
+  if (keys.includes("meta") || keys.includes("cmd") || keys.includes("command") || keys.includes("win"))
+    result.push("metaKey");
+  if (keys.includes("shift")) result.push("shiftKey");
+  return result;
+}
 function hotKeysHeld(event, hotKeys) {
-  return hotKeys.every((key) => event[key]);
+  if (!hotKeys) return false;
+  const mappedKeys = parseHotKeyString(hotKeys);
+  if (mappedKeys.length === 0) return false;
+  return mappedKeys.every((key) => event[key]);
 }
-var BaseElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-};
-var InspectoElement = class extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.options = {};
-    this.serverHotKeys = null;
-    this.active = false;
-    this.disabled = false;
-    this.isDragging = false;
-    this.hasMoved = false;
-    this.dragStartX = 0;
-    this.dragStartY = 0;
-    this.badgeInitialRight = 16;
-    this.badgeInitialBottom = 16;
-    this.cleanupMenu = null;
-    this.onDragStart = (e) => {
-      if (e.button !== 0) return;
-      if (e.target.classList?.contains(`${badgeClass}-close`)) return;
-      e.preventDefault();
-      this.isDragging = true;
-      this.hasMoved = false;
-      const rect = this.badge.getBoundingClientRect();
-      this.dragStartX = e.clientX - rect.left;
-      this.dragStartY = e.clientY - rect.top;
-      document.addEventListener("mousemove", this.onDragMove);
-      document.addEventListener("mouseup", this.onDragEnd);
+var ATTR_NAME, BaseElement, InspectoElement;
+var init_component = __esm({
+  "src/component.ts"() {
+    "use strict";
+    init_overlay();
+    init_menu();
+    init_http();
+    init_styles();
+    ATTR_NAME = "data-inspecto";
+    BaseElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
     };
-    this.onDragMove = (e) => {
-      if (!this.isDragging) return;
-      this.hasMoved = true;
-      let newLeft = e.clientX - this.dragStartX;
-      let newTop = e.clientY - this.dragStartY;
-      const badgeWidth = this.badge.offsetWidth;
-      const badgeHeight = this.badge.offsetHeight;
-      newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - badgeWidth));
-      newTop = Math.max(0, Math.min(newTop, window.innerHeight - badgeHeight));
-      this.badge.style.transition = "none";
-      this.badge.style.right = "auto";
-      this.badge.style.bottom = "auto";
-      this.badge.style.left = `${newLeft}px`;
-      this.badge.style.top = `${newTop}px`;
-    };
-    this.onDragEnd = () => {
-      document.removeEventListener("mousemove", this.onDragMove);
-      document.removeEventListener("mouseup", this.onDragEnd);
-      this.badge.style.transition = "";
-      setTimeout(() => {
+    InspectoElement = class extends BaseElement {
+      constructor() {
+        super(...arguments);
+        this.options = {};
+        this.serverHotKeys = null;
+        this.active = false;
+        this.disabled = false;
         this.isDragging = false;
-      }, 0);
-    };
-    this.onMouseMove = (e) => {
-      const isActive = this.isInspectorActive(e);
-      if (!isActive) {
-        this.overlay.hide();
-        return;
+        this.hasMoved = false;
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.badgeInitialRight = 16;
+        this.badgeInitialBottom = 16;
+        this.cleanupMenu = null;
+        this.onDragStart = (e) => {
+          var _a;
+          if (e.button !== 0) return;
+          if ((_a = e.target.classList) == null ? void 0 : _a.contains(`${badgeClass}-close`)) return;
+          e.preventDefault();
+          this.isDragging = true;
+          this.hasMoved = false;
+          const rect = this.badge.getBoundingClientRect();
+          this.dragStartX = e.clientX - rect.left;
+          this.dragStartY = e.clientY - rect.top;
+          document.addEventListener("mousemove", this.onDragMove);
+          document.addEventListener("mouseup", this.onDragEnd);
+        };
+        this.onDragMove = (e) => {
+          if (!this.isDragging) return;
+          this.hasMoved = true;
+          let newLeft = e.clientX - this.dragStartX;
+          let newTop = e.clientY - this.dragStartY;
+          const badgeWidth = this.badge.offsetWidth;
+          const badgeHeight = this.badge.offsetHeight;
+          newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - badgeWidth));
+          newTop = Math.max(0, Math.min(newTop, window.innerHeight - badgeHeight));
+          this.badge.style.transition = "none";
+          this.badge.style.right = "auto";
+          this.badge.style.bottom = "auto";
+          this.badge.style.left = `${newLeft}px`;
+          this.badge.style.top = `${newTop}px`;
+        };
+        this.onDragEnd = () => {
+          document.removeEventListener("mousemove", this.onDragMove);
+          document.removeEventListener("mouseup", this.onDragEnd);
+          this.badge.style.transition = "";
+          setTimeout(() => {
+            this.isDragging = false;
+          }, 0);
+        };
+        this.onMouseMove = (e) => {
+          var _a;
+          const isActive = this.isInspectorActive(e);
+          if (!isActive) {
+            this.overlay.hide();
+            return;
+          }
+          const target = findInspectable(e.target);
+          if (!target) {
+            this.overlay.hide();
+            return;
+          }
+          const attrValue = target.getAttribute(ATTR_NAME);
+          const loc = parseAttrValue(attrValue);
+          const label = loc ? `${(_a = loc.file.split("/").pop()) != null ? _a : ""}:${loc.line}` : attrValue;
+          this.overlay.show(target, label);
+          e.stopPropagation();
+        };
+        this.onClick = (e) => {
+          this.handleTrigger(e);
+        };
+        this.onContextMenu = (e) => {
+          if (this.isInspectorActive(e)) {
+            this.handleTrigger(e);
+          }
+        };
+        this.onKeyDown = (e) => {
+          var _a;
+          if (e.key === "Escape") {
+            (_a = this.cleanupMenu) == null ? void 0 : _a.call(this);
+            this.overlay.hide();
+          }
+        };
       }
-      const target = findInspectable(e.target);
-      if (!target) {
-        this.overlay.hide();
-        return;
+      connectedCallback() {
+        this.shadowRootEl = this.attachShadow({ mode: "open" });
+        const style = document.createElement("style");
+        style.textContent = inspectorStyles;
+        this.shadowRootEl.appendChild(style);
+        this.overlay = createOverlay(this.shadowRootEl);
+        this.badge = this.createBadge();
+        this.setupListeners();
+        if (this.options.defaultActive) {
+          this.setActive(true);
+        }
       }
-      const attrValue = target.getAttribute(ATTR_NAME);
-      const loc = parseAttrValue(attrValue);
-      const label = loc ? `${loc.file.split("/").pop() ?? ""}:${loc.line}` : attrValue;
-      this.overlay.show(target, label);
-      e.stopPropagation();
-    };
-    this.onClick = (e) => {
-      this.handleTrigger(e);
-    };
-    this.onContextMenu = (e) => {
-      if (this.isInspectorActive(e)) {
-        this.handleTrigger(e);
+      disconnectedCallback() {
+        this.teardownListeners();
       }
-    };
-    this.onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        this.cleanupMenu?.();
-        this.overlay.hide();
+      configure(options) {
+        this.options = options;
+        if (options.serverUrl) {
+          setBaseUrl(options.serverUrl);
+        }
+        if (options.theme === "dark") {
+          this.setAttribute("data-theme", "dark");
+        } else if (options.theme === "light") {
+          this.setAttribute("data-theme", "light");
+        } else {
+          this.removeAttribute("data-theme");
+        }
+        fetchIdeInfo(true).then((info) => {
+          if ((info == null ? void 0 : info.hotKeys) !== void 0) {
+            this.serverHotKeys = info.hotKeys;
+            this.updateBadgeContent();
+          }
+          if ((info == null ? void 0 : info.theme) !== void 0) {
+            if (info.theme === "dark") {
+              this.setAttribute("data-theme", "dark");
+            } else if (info.theme === "light") {
+              this.setAttribute("data-theme", "light");
+            } else {
+              this.removeAttribute("data-theme");
+            }
+          }
+          if ((info == null ? void 0 : info.includeSnippet) !== void 0) {
+            this.options.includeSnippet = info.includeSnippet;
+          }
+        }).catch(() => {
+        });
       }
-    };
-  }
-  connectedCallback() {
-    this.shadowRootEl = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = inspectorStyles;
-    this.shadowRootEl.appendChild(style);
-    this.overlay = createOverlay(this.shadowRootEl);
-    this.badge = this.createBadge();
-    this.setupListeners();
-    if (this.options.defaultActive) {
-      this.setActive(true);
-    }
-  }
-  disconnectedCallback() {
-    this.teardownListeners();
-  }
-  configure(options) {
-    this.options = options;
-    if (options.serverUrl) {
-      setBaseUrl(options.serverUrl);
-    }
-    if (options.theme === "dark") {
-      this.setAttribute("data-theme", "dark");
-    } else if (options.theme === "light") {
-      this.setAttribute("data-theme", "light");
-    } else {
-      this.removeAttribute("data-theme");
-    }
-    fetchIdeInfo(true).then((info) => {
-      if (info?.hotKeys !== void 0) {
-        this.serverHotKeys = info.hotKeys;
+      createBadge() {
+        const btn = document.createElement("button");
+        btn.className = badgeClass;
+        btn.style.display = "flex";
+        const textSpan = document.createElement("span");
+        textSpan.textContent = "Inspecto Ready";
+        const closeBtn = document.createElement("span");
+        closeBtn.className = `${badgeClass}-close`;
+        closeBtn.innerHTML = "\xD7";
+        closeBtn.title = "Pause Inspector";
+        closeBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.toggleDisabled();
+        });
+        btn.appendChild(textSpan);
+        btn.appendChild(closeBtn);
+        btn.addEventListener("mousedown", this.onDragStart);
+        btn.addEventListener("click", (e) => {
+          if (this.hasMoved) {
+            this.hasMoved = false;
+            return;
+          }
+          if (this.disabled) {
+            this.toggleDisabled();
+          } else {
+            this.setActive(!this.active);
+          }
+        });
+        this.shadowRootEl.appendChild(btn);
+        return btn;
+      }
+      toggleDisabled() {
+        var _a;
+        this.disabled = !this.disabled;
+        if (this.disabled) {
+          this.active = false;
+          this.overlay.hide();
+          (_a = this.cleanupMenu) == null ? void 0 : _a.call(this);
+          this.cleanupMenu = null;
+        }
         this.updateBadgeContent();
       }
-      if (info?.includeSnippet !== void 0) {
-        this.options.includeSnippet = info.includeSnippet;
+      dismiss() {
+        this.badge.style.display = "none";
+        this.setActive(false);
       }
-    }).catch(() => {
-    });
-  }
-  createBadge() {
-    const btn = document.createElement("button");
-    btn.className = badgeClass;
-    btn.style.display = "flex";
-    const textSpan = document.createElement("span");
-    textSpan.textContent = "Inspecto Ready";
-    const closeBtn = document.createElement("span");
-    closeBtn.className = `${badgeClass}-close`;
-    closeBtn.innerHTML = "\xD7";
-    closeBtn.title = "Pause Inspector";
-    closeBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      this.toggleDisabled();
-    });
-    btn.appendChild(textSpan);
-    btn.appendChild(closeBtn);
-    btn.addEventListener("mousedown", this.onDragStart);
-    btn.addEventListener("click", (e) => {
-      if (this.hasMoved) {
-        this.hasMoved = false;
-        return;
+      getHotKeyHint() {
+        const hotKeys = this.getEffectiveHotKeys();
+        if (hotKeys === false) return "Inspecto Ready";
+        const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+        const keys = hotKeys.split("+").map((k) => k.trim().toLowerCase());
+        const displayKeys = keys.map((k) => {
+          if (k === "alt" || k === "option") return isMac ? "\u2325" : "Alt";
+          if (k === "cmd" || k === "meta" || k === "win" || k === "command") return isMac ? "\u2318" : "Win";
+          if (k === "ctrl" || k === "control") return isMac ? "\u2303" : "Ctrl";
+          if (k === "shift") return isMac ? "\u21E7" : "Shift";
+          return k.charAt(0).toUpperCase() + k.slice(1);
+        });
+        return `Hold ${displayKeys.join(" + ")} to Inspect`;
       }
-      if (this.disabled) {
-        this.toggleDisabled();
-      } else {
-        this.setActive(!this.active);
+      getEffectiveHotKeys() {
+        if (this.options.hotKeys !== void 0) return this.options.hotKeys;
+        if (this.serverHotKeys !== null) return this.serverHotKeys;
+        return "alt";
       }
-    });
-    this.shadowRootEl.appendChild(btn);
-    return btn;
-  }
-  toggleDisabled() {
-    this.disabled = !this.disabled;
-    if (this.disabled) {
-      this.active = false;
-      this.overlay.hide();
-      this.cleanupMenu?.();
-      this.cleanupMenu = null;
-    }
-    this.updateBadgeContent();
-  }
-  dismiss() {
-    this.badge.style.display = "none";
-    this.setActive(false);
-  }
-  getHotKeyHint() {
-    const hotKeys = this.getEffectiveHotKeys();
-    if (hotKeys === false || hotKeys.length === 0) return "Inspecto Ready";
-    const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-    const keys = hotKeys.map((k) => {
-      if (k === "altKey") return isMac ? "\u2325" : "Alt";
-      if (k === "metaKey") return isMac ? "\u2318" : "Win";
-      if (k === "ctrlKey") return isMac ? "\u2303" : "Ctrl";
-      if (k === "shiftKey") return isMac ? "\u21E7" : "Shift";
-      return k;
-    });
-    return `Hold ${keys.join(" + ")} to Inspect`;
-  }
-  getEffectiveHotKeys() {
-    if (this.options.hotKeys !== void 0) return this.options.hotKeys;
-    if (this.serverHotKeys !== null) return this.serverHotKeys;
-    return ["altKey"];
-  }
-  updateBadgeContent() {
-    const textSpan = this.badge.querySelector("span");
-    if (!textSpan) return;
-    if (this.disabled) {
-      textSpan.textContent = "Inspector Paused";
-      this.badge.classList.remove("active");
-      this.badge.classList.add("disabled");
-    } else if (this.active) {
-      textSpan.textContent = "\u{1F50D} Inspecting...";
-      this.badge.classList.remove("disabled");
-      this.badge.classList.add("active");
-    } else {
-      textSpan.textContent = this.getHotKeyHint();
-      this.badge.classList.remove("active", "disabled");
-    }
-  }
-  setActive(value) {
-    this.active = value;
-    this.updateBadgeContent();
-    if (!value) {
-      this.overlay.hide();
-      this.cleanupMenu?.();
-      this.cleanupMenu = null;
-    }
-  }
-  handleTrigger(e) {
-    if (!this.isInspectorActive(e)) return;
-    const target = findInspectable(e.target);
-    if (!target) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const attrValue = target.getAttribute(ATTR_NAME);
-    const loc = parseAttrValue(attrValue);
-    if (!loc) return;
-    this.cleanupMenu?.();
-    this.cleanupMenu = showIntentMenu(
-      this.shadowRootEl,
-      loc,
-      e.clientX,
-      e.clientY,
-      this.options,
-      () => {
-        this.cleanupMenu = null;
+      updateBadgeContent() {
+        const textSpan = this.badge.querySelector("span");
+        if (!textSpan) return;
+        if (this.disabled) {
+          textSpan.textContent = "Inspector Paused";
+          this.badge.classList.remove("active");
+          this.badge.classList.add("disabled");
+        } else if (this.active) {
+          textSpan.textContent = "\u{1F50D} Inspecting...";
+          this.badge.classList.remove("disabled");
+          this.badge.classList.add("active");
+        } else {
+          textSpan.textContent = this.getHotKeyHint();
+          this.badge.classList.remove("active", "disabled");
+        }
       }
-    );
-  }
-  isInspectorActive(e) {
-    if (this.disabled) return false;
-    if (this.active) return true;
-    const hotKeys = this.getEffectiveHotKeys();
-    if (hotKeys === false) return false;
-    return hotKeysHeld(e, hotKeys);
-  }
-  setupListeners() {
-    document.addEventListener("mousemove", this.onMouseMove, true);
-    document.addEventListener("click", this.onClick, true);
-    document.addEventListener("contextmenu", this.onContextMenu, true);
-    document.addEventListener("keydown", this.onKeyDown, true);
-  }
-  teardownListeners() {
-    document.removeEventListener("mousemove", this.onMouseMove, true);
-    document.removeEventListener("click", this.onClick, true);
-    document.removeEventListener("contextmenu", this.onContextMenu, true);
-    document.removeEventListener("keydown", this.onKeyDown, true);
+      setActive(value) {
+        var _a;
+        this.active = value;
+        this.updateBadgeContent();
+        if (!value) {
+          this.overlay.hide();
+          (_a = this.cleanupMenu) == null ? void 0 : _a.call(this);
+          this.cleanupMenu = null;
+        }
+      }
+      handleTrigger(e) {
+        var _a;
+        if (!this.isInspectorActive(e)) return;
+        const target = findInspectable(e.target);
+        if (!target) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const attrValue = target.getAttribute(ATTR_NAME);
+        const loc = parseAttrValue(attrValue);
+        if (!loc) return;
+        (_a = this.cleanupMenu) == null ? void 0 : _a.call(this);
+        this.cleanupMenu = showIntentMenu(
+          this.shadowRootEl,
+          loc,
+          e.clientX,
+          e.clientY,
+          this.options,
+          () => {
+            this.cleanupMenu = null;
+          }
+        );
+      }
+      isInspectorActive(e) {
+        if (this.disabled) return false;
+        if (this.active) return true;
+        const hotKeys = this.getEffectiveHotKeys();
+        if (hotKeys === false) return false;
+        return hotKeysHeld(e, hotKeys);
+      }
+      setupListeners() {
+        document.addEventListener("mousemove", this.onMouseMove, true);
+        document.addEventListener("click", this.onClick, true);
+        document.addEventListener("contextmenu", this.onContextMenu, true);
+        document.addEventListener("keydown", this.onKeyDown, true);
+      }
+      teardownListeners() {
+        document.removeEventListener("mousemove", this.onMouseMove, true);
+        document.removeEventListener("click", this.onClick, true);
+        document.removeEventListener("contextmenu", this.onContextMenu, true);
+        document.removeEventListener("keydown", this.onKeyDown, true);
+      }
+    };
+    if (typeof customElements !== "undefined") {
+      customElements.define("inspecto-overlay", InspectoElement);
+    }
   }
-};
-if (typeof customElements !== "undefined") {
-  customElements.define("inspecto-overlay", InspectoElement);
-}
+});
 
 // src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  mountInspector: () => mountInspector,
+  unmountInspector: () => unmountInspector
+});
+module.exports = __toCommonJS(src_exports);
 var TAG_NAME = "inspecto-overlay";
-function mountInspector(options = {}) {
-  const existing = document.querySelector(TAG_NAME);
-  if (existing) {
-    existing.configure(options);
-    return existing;
-  }
-  const el = document.createElement(TAG_NAME);
-  el.configure(options);
-  document.body.appendChild(el);
-  return el;
+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 existing = document.querySelector(TAG_NAME);
+    if (existing) {
+      ;
+      existing.configure(options);
+      return existing;
+    }
+    const el = document.createElement(TAG_NAME);
+    el.configure(options);
+    document.body.appendChild(el);
+    return el;
+  });
 }
 function unmountInspector() {
+  if (typeof document === "undefined") return;
   const existing = document.querySelector(TAG_NAME);
   if (existing) {
     existing.remove();