@inspecto-dev/core 0.2.0-alpha.0

package/dist/index.cjs

@@ -0,0 +1,1305 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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);
+
+// 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);
+}
+
+// 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 unmountInspector() {
+  const existing = document.querySelector(TAG_NAME);
+  if (existing) {
+    existing.remove();
+  }
+}
+if (typeof window !== "undefined") {
+  window.InspectoClient = {
+    mountInspector,
+    unmountInspector
+  };
+}
+//# sourceMappingURL=index.cjs.map