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

package/dist/index.js

@@ -1,1268 +1,27 @@
-// 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 = `
-  --inspecto-menu-bg: #252526;
-  --inspecto-menu-border: #454545;
-  --inspecto-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-  --inspecto-text: #cccccc;
-  --inspecto-text-muted: #858585;
-  --inspecto-hover-bg: #04395e;
-  --inspecto-hover-text: #ffffff;
-  --inspecto-hover-icon: #ffffff;
-  --inspecto-input-bg: #3c3c3c;
-  --inspecto-input-border: #007acc;
-  --inspecto-shortcut-text: #858585;
-  --inspecto-badge-bg: rgba(30, 30, 30, 0.7);
-  --inspecto-badge-text: #e5e5e5;
-  --inspecto-badge-active-bg: #007acc;
-  --inspecto-badge-active-text: #ffffff;
-  --inspecto-badge-border: 1px solid rgba(255, 255, 255, 0.1);
-  
-  --inspecto-tooltip-bg: #222222;
-  --inspecto-tooltip-text: #cccccc;
-  --inspecto-tooltip-border: #444;
-  --inspecto-tooltip-shadow: 0 2px 10px rgba(0,0,0,0.5);
-  --inspecto-tag-color: #d16969;
-  --inspecto-id-color: #d16969;
-  --inspecto-class-color: #9cdcfe;
-  --inspecto-dim-color: #858585;
-  --inspecto-error-color: #ef4444;
-`;
-var inspectorStyles = `
-  :host {
-    /* Light theme (default) */
-    --inspecto-menu-bg: #ffffff;
-    --inspecto-menu-border: #d4d4d4;
-    --inspecto-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    --inspecto-text: #333333;
-    --inspecto-text-muted: #6b7280;
-    --inspecto-hover-bg: #0060c0;
-    --inspecto-hover-text: #ffffff;
-    --inspecto-hover-icon: #ffffff;
-    --inspecto-input-bg: #ffffff;
-    --inspecto-input-border: #007acc;
-    --inspecto-shortcut-text: #9ca3af;
-    --inspecto-badge-bg: rgba(30, 30, 30, 0.7);
-    --inspecto-badge-text: #e5e5e5;
-    --inspecto-badge-active-bg: #007acc;
-    --inspecto-badge-active-text: #ffffff;
-    --inspecto-badge-border: 1px solid rgba(255, 255, 255, 0.1);
-    
-    /* Chrome DevTools like colors */
-    --inspecto-overlay-border: #4285f4; /* Google Blue */
-    --inspecto-overlay-bg: rgba(66, 133, 244, 0.2); 
-    --inspecto-tooltip-bg: #ffffff;
-    --inspecto-tooltip-text: #333333;
-    --inspecto-tooltip-border: #ccc;
-    --inspecto-tooltip-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    
-    --inspecto-tag-color: #8b008b; /* Dark magenta */
-    --inspecto-id-color: #8b008b;
-    --inspecto-class-color: #00008b; /* Dark blue */
-    --inspecto-dim-color: #555555;
-    --inspecto-error-color: #ef4444;
-  }
-
-  :host([data-theme="dark"]) {
-    ${darkVars}
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :host(:not([data-theme="light"])) {
-      ${darkVars}
-    }
-  }
-
-  .${overlayClass} {
-    position: fixed;
-    pointer-events: none;
-    z-index: 2147483646;
-    border: 1px dashed var(--inspecto-overlay-border);
-    background: var(--inspecto-overlay-bg);
-    box-sizing: border-box;
-    transition: all 0.05s linear;
-  }
-
-  .${tooltipClass} {
-    position: fixed;
-    pointer-events: none;
-    z-index: 2147483647;
-    background: var(--inspecto-tooltip-bg);
-    color: var(--inspecto-tooltip-text);
-    border: 1px solid var(--inspecto-tooltip-border);
-    border-radius: 4px;
-    box-shadow: var(--inspecto-tooltip-shadow);
-    padding: 6px 10px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 12px;
-    line-height: 1.4;
-    transition: all 0.05s linear;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  
-  /* Create the small pointer arrow like Chrome DevTools */
-  .${tooltipClass}::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
-
-  .${tooltipTopClass}::after {
-    bottom: -6px;
-    left: var(--inspecto-arrow-left, 10px);
-    border-width: 6px 6px 0 6px;
-    border-color: var(--inspecto-tooltip-bg) transparent transparent transparent;
-  }
-
-  .${tooltipBottomClass}::after {
-    top: -6px;
-    left: var(--inspecto-arrow-left, 10px);
-    border-width: 0 6px 6px 6px;
-    border-color: transparent transparent var(--inspecto-tooltip-bg) transparent;
-  }
-  
-  /* Outline for the arrow to match border */
-  .${tooltipClass}::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
-  
-  .${tooltipTopClass}::before {
-    bottom: -7px;
-    left: calc(var(--inspecto-arrow-left, 10px) - 1px);
-    border-width: 7px 7px 0 7px;
-    border-color: var(--inspecto-tooltip-border) transparent transparent transparent;
-  }
-  
-  .${tooltipBottomClass}::before {
-    top: -7px;
-    left: calc(var(--inspecto-arrow-left, 10px) - 1px);
-    border-width: 0 7px 7px 7px;
-    border-color: transparent transparent var(--inspecto-tooltip-border) transparent;
-  }
-
-  .${tagClass} {
-    color: var(--inspecto-tag-color);
-    font-weight: 600;
-    font-family: monospace;
-  }
-  
-  .${idClass} {
-    color: var(--inspecto-id-color);
-    font-weight: 600;
-    font-family: monospace;
-  }
-
-  .${classClass} {
-    color: var(--inspecto-class-color);
-    font-family: monospace;
-  }
-
-  .${dimClass} {
-    color: var(--inspecto-dim-color);
-    margin-left: 4px;
-  }
-  
-  .${separatorClass} {
-    height: 1px;
-    background: var(--inspecto-tooltip-border);
-    margin: 2px -10px;
-    opacity: 0.5;
-  }
-  
-  .${sourceClass} {
-    font-family: 'SF Mono', 'Fira Code', monospace;
-    font-size: 11px;
-    color: var(--inspecto-text-muted);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 300px;
-  }
-
-  .${menuClass} {
-    position: fixed;
-    z-index: 2147483647;
-    background: var(--inspecto-menu-bg);
-    border: 1px solid var(--inspecto-menu-border);
-    border-radius: 6px;
-    padding: 6px;
-    min-width: 300px;
-    box-shadow: var(--inspecto-menu-shadow);
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    color: var(--inspecto-text);
-  }
-
-  .${menuInputWrapperClass} {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--inspecto-menu-border);
-    border-radius: 4px;
-    padding: 6px 8px;
-    margin: 4px;
-    margin-bottom: 8px;
-  }
-  
-  .${menuInputWrapperClass}:focus-within {
-    border-color: var(--inspecto-input-border);
-  }
-
-  .${menuInputClass} {
-    width: 100%;
-    border: none;
-    outline: none;
-    font-size: 13px;
-    color: var(--inspecto-text);
-    background: transparent;
-  }
-
-  .${menuInputClass}::placeholder {
-    color: var(--inspecto-text-muted);
-  }
-
-  .${menuInputIconClass} {
-    color: var(--inspecto-text-muted);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 4px;
-  }
-
-  .${menuInputIconClass}:hover {
-    color: var(--inspecto-text);
-  }
-
-  .${menuItemClass} {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 10px;
-    margin: 2px 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--inspecto-text);
-    font-size: 13px;
-    cursor: pointer;
-    text-align: left;
-  }
-
-  .${menuItemClass}:hover {
-    background: var(--inspecto-hover-bg);
-    color: var(--inspecto-hover-text);
-  }
-
-  .${menuItemClass} .${shortcutIconClass} {
-    margin-left: auto;
-    color: var(--inspecto-text-muted);
-  }
-
-  .${menuItemClass}:hover .${shortcutIconClass} {
-    color: var(--inspecto-hover-icon);
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .${loadingSpinnerClass} {
-    width: 14px;
-    height: 14px;
-    border: 2px solid var(--inspecto-overlay-border);
-    border-top-color: transparent;
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-    margin: 4px auto;
-    display: block;
-  }
-
-  .${errorMsgClass} {
-    font-size: 11px;
-    color: var(--inspecto-error-color);
-    padding: 4px 8px;
-    text-align: center;
-  }
-
-  .${badgeClass} {
-    position: fixed;
-    bottom: 16px;
-    right: 16px;
-    z-index: 2147483645;
-    background: var(--inspecto-badge-bg);
-    color: var(--inspecto-badge-text);
-    border: var(--inspecto-badge-border);
-    border-radius: 20px;
-    padding: 6px 12px;
-    font-size: 12px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    cursor: grab;
-    opacity: 0.85;
-    transition: background 0.2s, color 0.2s, opacity 0.2s, box-shadow 0.2s;
-    pointer-events: all;
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: none;
-  }
-
-  .${badgeClass}:active {
-    cursor: grabbing;
-  }
-
-  .${badgeClass}-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: transparent;
-    color: currentColor;
-    font-size: 14px;
-    line-height: 1;
-    opacity: 0.5;
-    transition: opacity 0.2s, background 0.2s;
-    margin-left: 2px;
-    cursor: pointer;
-  }
-
-  .${badgeClass}-close:hover {
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.2);
-  }
-
-  .${badgeClass}.active {
-    background: var(--inspecto-badge-active-bg);
-    color: var(--inspecto-badge-active-text);
-    border: 1px solid transparent;
-    box-shadow: 0 0 10px rgba(0, 122, 204, 0.3);
-  }
-
-  .${badgeClass}.disabled {
-    background: rgba(30, 30, 30, 0.4);
-    color: rgba(229, 229, 229, 0.5);
-    text-decoration: line-through;
-    border: 1px dashed rgba(255, 255, 255, 0.1);
-  }
-
-  .${badgeClass}.disabled .${badgeClass}-close {
-    opacity: 0.8;
-    text-decoration: none;
-    transform: rotate(45deg);
-  }
-
-  .${badgeClass}:hover {
-    opacity: 1;
-  }
-`;
-
-// src/overlay.ts
-var GAP = 8;
-var EDGE_MARGIN = 4;
-function createOverlay(shadowRoot) {
-  const overlay = document.createElement("div");
-  overlay.className = overlayClass;
-  overlay.style.display = "none";
-  const tooltip = document.createElement("div");
-  tooltip.className = tooltipClass;
-  const tagSpan = document.createElement("span");
-  tagSpan.className = tagClass;
-  const idSpan = document.createElement("span");
-  idSpan.className = idClass;
-  const classSpan = document.createElement("span");
-  classSpan.className = classClass;
-  const dimSpan = document.createElement("span");
-  dimSpan.className = dimClass;
-  const separator = document.createElement("div");
-  separator.className = separatorClass;
-  const sourceSpan = document.createElement("div");
-  sourceSpan.className = sourceClass;
-  tooltip.appendChild(tagSpan);
-  tooltip.appendChild(idSpan);
-  tooltip.appendChild(classSpan);
-  tooltip.appendChild(document.createTextNode(" "));
-  tooltip.appendChild(dimSpan);
-  tooltip.appendChild(separator);
-  tooltip.appendChild(sourceSpan);
-  shadowRoot.appendChild(overlay);
-  shadowRoot.appendChild(tooltip);
-  function show(el, sourceLabel) {
-    const rect = el.getBoundingClientRect();
-    overlay.style.display = "block";
-    overlay.style.left = `${rect.left}px`;
-    overlay.style.top = `${rect.top}px`;
-    overlay.style.width = `${rect.width}px`;
-    overlay.style.height = `${rect.height}px`;
-    const tagName = el.tagName.toLowerCase();
-    tagSpan.textContent = tagName;
-    idSpan.textContent = el.id ? `#${el.id}` : "";
-    const classes = Array.from(el.classList).map((c) => `.${c}`).join("");
-    classSpan.textContent = classes;
-    dimSpan.textContent = `${Math.round(rect.width)} \xD7 ${Math.round(rect.height)}`;
-    sourceSpan.textContent = sourceLabel;
-    tooltip.style.visibility = "hidden";
-    tooltip.style.display = "block";
-    const tooltipRect = tooltip.getBoundingClientRect();
-    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
-    let tooltipTop = rect.top - tooltipRect.height - GAP;
-    let isBottom = false;
-    if (tooltipTop < EDGE_MARGIN) {
-      tooltipTop = rect.bottom + GAP;
-      if (tooltipTop + tooltipRect.height > viewportHeight - EDGE_MARGIN) {
-        tooltipTop = viewportHeight - tooltipRect.height - EDGE_MARGIN;
-      }
-      isBottom = true;
-    }
-    tooltip.classList.toggle(tooltipBottomClass, isBottom);
-    tooltip.classList.toggle(tooltipTopClass, !isBottom);
-    let tooltipLeft = rect.left;
-    if (tooltipLeft + tooltipRect.width > viewportWidth - EDGE_MARGIN) {
-      tooltipLeft = viewportWidth - tooltipRect.width - EDGE_MARGIN;
-    }
-    if (tooltipLeft < EDGE_MARGIN) {
-      tooltipLeft = EDGE_MARGIN;
-    }
-    const targetPointX = rect.left + Math.min(15, rect.width / 2);
-    let arrowLeft = targetPointX - tooltipLeft;
-    arrowLeft = Math.max(6, Math.min(arrowLeft, tooltipRect.width - 18));
-    tooltip.style.left = `${tooltipLeft}px`;
-    tooltip.style.top = `${tooltipTop}px`;
-    tooltip.style.setProperty("--inspecto-arrow-left", `${arrowLeft}px`);
-    tooltip.style.visibility = "visible";
-  }
-  function hide() {
-    overlay.style.display = "none";
-    tooltip.style.display = "none";
-  }
-  return { show, hide };
-}
-
-// 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() || "";
-  switch (ext) {
-    case "vue":
-      return "Vue";
-    case "svelte":
-      return "Svelte";
-    case "astro":
-      return "Astro";
-    case "jsx":
-    case "tsx":
-      return "React";
-    case "ts":
-    case "js":
-      return "JavaScript/TypeScript";
-    default:
-      return "UI";
-  }
-}
-function buildPrompt(template, location, snippetResult) {
-  const shortFile = location.file.split("/").pop() ?? location.file;
-  const ext = shortFile.split(".").pop()?.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;
-    finalPrompt = finalPrompt.replace(/\{\{name\}\}/g, name);
-    finalPrompt += `
-
-Context from \`${location.file}\` (line ${location.line}):
-\`\`\`${ext}
-${snippetResult.snippet}
-\`\`\``;
-  }
-  return finalPrompt;
-}
-
-// 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;
-  }
-}
-async function openFile(req) {
-  try {
-    const res = await fetch(`${BASE_URL}/open`, {
-      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)
-  });
-  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
-    };
-  }
-  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;
-  const menu = document.createElement("div");
-  menu.className = menuClass;
-  const { input, inputWrapper, sendIcon } = createAskInput(options.askPlaceholder);
-  menu.appendChild(inputWrapper);
-  const separator = document.createElement("div");
-  separator.style.height = "1px";
-  separator.style.background = "var(--inspecto-menu-border)";
-  separator.style.margin = "8px 4px 6px 4px";
-  menu.appendChild(separator);
-  const loadingEl = document.createElement("div");
-  loadingEl.className = loadingSpinnerClass;
-  menu.appendChild(loadingEl);
-  menu.style.left = `${Math.min(clickX, window.innerWidth - MENU_WIDTH)}px`;
-  menu.style.visibility = "hidden";
-  menu.style.display = "block";
-  shadowRoot.appendChild(menu);
-  const updatePosition = () => {
-    const rect = menu.getBoundingClientRect();
-    menu.style.top = `${Math.min(clickY + 8, window.innerHeight - rect.height - 8)}px`;
-  };
-  updatePosition();
-  menu.style.visibility = "visible";
-  setTimeout(() => input.focus(), 0);
-  const onDocClick = (e) => {
-    const path = e.composedPath();
-    if (path.includes(menu)) return;
-    cleanup();
-  };
-  setTimeout(() => document.addEventListener("click", onDocClick, { capture: true }), 0);
-  function cleanup() {
-    document.removeEventListener("click", onDocClick, { capture: true });
-    menu.remove();
-    onClose();
-  }
-  const handleSend = async (promptText, snippetText, disable, restore) => {
-    disable();
-    await openFile(location);
-    await new Promise((r) => setTimeout(r, 100));
-    const result = await sendToAi({ location, snippet: snippetText, prompt: promptText });
-    if (result.success) {
-      cleanup();
-    } else {
-      restore();
-      showError(menu, result.error ?? "Unknown error", result.errorCode);
-    }
-  };
-  const submitAsk = async () => {
-    if (!input.value.trim()) return;
-    input.disabled = true;
-    sendIcon.style.pointerEvents = "none";
-    try {
-      let snippetResult = null;
-      if (includeSnippet) {
-        snippetResult = await fetchSnippet(
-          location.file,
-          location.line,
-          location.column,
-          maxSnippetLines
-        );
-      }
-      const prompt = buildPrompt(
-        CUSTOM_PROMPT_TEMPLATE(input.value.trim()),
-        location,
-        snippetResult
-      );
-      await handleSend(
-        prompt,
-        snippetResult?.snippet || "",
-        () => {
-        },
-        // already disabled
-        () => {
-          input.disabled = false;
-          sendIcon.style.pointerEvents = "auto";
-        }
-      );
-    } catch (err) {
-      input.disabled = false;
-      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) => {
-    loadingEl.remove();
-    const intents = resolveIntents(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";
-        btn2.appendChild(span);
-        const shortcutDiv = document.createElement("div");
-        shortcutDiv.className = shortcutIconClass;
-        shortcutDiv.textContent = "\u21B5";
-        btn2.appendChild(shortcutDiv);
-        btn2.addEventListener("click", (e) => {
-          e.stopPropagation();
-          openFile(location);
-          cleanup();
-        });
-        menu.appendChild(btn2);
-        continue;
-      }
-      let fullPromptTemplate = intent.prompt ?? "";
-      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 btn = document.createElement("button");
-      btn.className = menuItemClass;
-      btn.textContent = label;
-      btn.addEventListener("click", async (e) => {
-        e.stopPropagation();
-        btn.disabled = true;
-        btn.textContent = "Sending...";
-        try {
-          let snippetResult = null;
-          if (includeSnippet) {
-            snippetResult = await fetchSnippet(
-              location.file,
-              location.line,
-              location.column,
-              maxSnippetLines
-            );
-          }
-          const prompt = buildPrompt(fullPromptTemplate, location, snippetResult);
-          await handleSend(
-            prompt,
-            snippetResult?.snippet || "",
-            () => {
-            },
-            // already disabled
-            () => {
-              btn.disabled = false;
-              btn.textContent = label;
-            }
-          );
-        } catch (err) {
-          btn.disabled = false;
-          btn.textContent = label;
-          showError(menu, err.message, err.errorCode);
-        }
-      });
-      menu.appendChild(btn);
-    }
-    updatePosition();
-  }).catch((err) => {
-    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"
-    );
-    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...";
-  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) {
-  menu.querySelector(`.${errorMsgClass}`)?.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);
-}
-
-// src/component.ts
-var ATTR_NAME = "data-inspecto";
-function parseAttrValue(value) {
-  const parts = value.split(":");
-  if (parts.length < 3) return null;
-  const col = parseInt(parts[parts.length - 1], 10);
-  const line = parseInt(parts[parts.length - 2], 10);
-  const file = parts.slice(0, parts.length - 2).join(":");
-  if (isNaN(line) || isNaN(col) || !file) return null;
-  return { file, line, column: col };
-}
-function findInspectable(el) {
-  while (el) {
-    if (el.hasAttribute(ATTR_NAME)) return el;
-    el = el.parentElement;
-  }
-  return null;
-}
-function hotKeysHeld(event, hotKeys) {
-  return hotKeys.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);
-    };
-    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) => {
-      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 ? `${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);
-      }
-    };
-    this.onKeyDown = (e) => {
-      if (e.key === "Escape") {
-        this.cleanupMenu?.();
-        this.overlay.hide();
-      }
-    };
-  }
-  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;
-        this.updateBadgeContent();
-      }
-      if (info?.includeSnippet !== void 0) {
-        this.options.includeSnippet = info.includeSnippet;
-      }
-    }).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;
-      }
-      if (this.disabled) {
-        this.toggleDisabled();
-      } else {
-        this.setActive(!this.active);
-      }
-    });
-    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;
-      }
-    );
-  }
-  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);
-}
+import {
+  __async
+} from "./chunk-C4KO2HLL.js";
 
 // src/index.ts
 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 } = yield import("./component-4WPU23TV.js");
+    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();
@@ -1275,7 +34,6 @@ if (typeof window !== "undefined") {
   };
 }
 export {
-  InspectoElement,
   mountInspector,
   unmountInspector
 };