uilint-react 0.1.31 → 0.1.33

package/dist/{chunk-XAAIRXB4.js → chunk-JBBUE3Y5.js}

@@ -1,9 +1,8 @@
 "use client";
 import {
   buildEditorUrl,
-  useUILintContext,
-  useUILintStore
-} from "./chunk-M3H56XIZ.js";
+  useUILintContext
+} from "./chunk-MO4NS6EG.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";
@@ -83,7 +82,7 @@ async function prefetchSources(filePaths) {
 }
 
 // src/components/ui-lint/InspectionPanel.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var STYLES = {
   bg: "rgba(17, 24, 39, 0.95)",
   bgSurface: "rgba(31, 41, 55, 0.9)",
@@ -556,26 +555,6 @@ function SourceTab({ element }) {
 }
 function ScanSection({ element }) {
   const { elementIssuesCache, autoScanState } = useUILintContext();
-  const [copied, setCopied] = useState(false);
-  const manualKey = useMemo(() => {
-    const dataLoc = element.element.getAttribute("data-loc");
-    if (dataLoc) return `dataloc:${dataLoc}`;
-    if (element.source) {
-      return `src:${element.source.fileName}:${element.source.lineNumber}:${element.source.columnNumber ?? 0}`;
-    }
-    return `fallback:${element.element.tagName.toLowerCase()}:${Math.round(
-      element.rect.left
-    )}:${Math.round(element.rect.top)}`;
-  }, [element.element, element.source, element.rect]);
-  const manualScan = useUILintStore(
-    (s) => s.manualScanCache.get(manualKey)
-  );
-  const upsertManualScan = useUILintStore(
-    (s) => s.upsertManualScan
-  );
-  const includeChildren = manualScan?.includeChildren ?? false;
-  const componentName = element.componentStack[0]?.name || element.element.tagName.toLowerCase();
-  const componentLine = element.source?.lineNumber;
   const cachedIssue = useMemo(() => {
     if (element.scannedElementId) {
       const cached = elementIssuesCache.get(element.scannedElementId);
@@ -598,189 +577,14 @@ function ScanSection({ element }) {
     elementIssuesCache,
     autoScanState.elements
   ]);
-  const generateFixPrompt = useCallback(
-    (issues, relativePath) => {
-      if (issues.length === 0) {
-        return `No style issues found in the \`${componentName}\` component in \`${relativePath}\`. The component appears to follow the styleguide.`;
-      }
-      const issueList = issues.map((issue) => {
-        const lineInfo = issue.line ? `Line ${issue.line}: ` : "";
-        return `- ${lineInfo}${issue.message}`;
-      }).join("\n");
-      return `Fix the following style issues in the \`${componentName}\` component in \`${relativePath}\`:
-
-Issues found:
-${issueList}
-
-Please update this component to match our styleguide.`;
-    },
-    [componentName]
-  );
-  const cachedFixPrompt = useMemo(() => {
-    if (!cachedIssue || cachedIssue.status !== "complete") return null;
-    const relativePath = element.source?.fileName || "unknown";
-    return generateFixPrompt(cachedIssue.issues, relativePath);
-  }, [cachedIssue, element.source, generateFixPrompt]);
-  const handleScan = useCallback(async () => {
-    if (!element.source) {
-      upsertManualScan(manualKey, {
-        status: "error",
-        error: "No source information available"
-      });
-      return;
-    }
-    const MAX_DATALOCS = 80;
-    const selectedDataLoc = element.element.getAttribute("data-loc");
-    let dataLocList = [];
-    if (includeChildren) {
-      const nodes = [
-        element.element,
-        ...Array.from(element.element.querySelectorAll("[data-loc]"))
-      ];
-      for (const n of nodes) {
-        const v = n.getAttribute("data-loc");
-        if (v) dataLocList.push(v);
-      }
-    } else if (selectedDataLoc) {
-      dataLocList = [selectedDataLoc];
-    }
-    dataLocList = Array.from(new Set(dataLocList)).slice(0, MAX_DATALOCS);
-    upsertManualScan(manualKey, {
-      status: "scanning",
-      error: void 0,
-      fixPrompt: void 0,
-      issues: [],
-      progressLine: "Preparing analysis\u2026"
-    });
-    try {
-      const sourceResponse = await fetch(
-        `/api/.uilint/source?path=${encodeURIComponent(
-          element.source.fileName
-        )}`
-      );
-      if (!sourceResponse.ok) {
-        throw new Error("Failed to fetch source code");
-      }
-      const sourceData = await sourceResponse.json();
-      const sourceCode = sourceData.content;
-      const relativePath = sourceData.relativePath || element.source.fileName;
-      const analyzeResponse = await fetch("/api/.uilint/analyze", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          sourceCode,
-          filePath: relativePath,
-          componentName,
-          componentLine,
-          includeChildren,
-          dataLocs: dataLocList.length > 0 ? dataLocList : void 0,
-          stream: true
-        })
-      });
-      if (!analyzeResponse.ok) {
-        throw new Error("Failed to analyze source code");
-      }
-      const contentType = analyzeResponse.headers.get("content-type") || "";
-      if (!contentType.includes("text/event-stream") || !analyzeResponse.body) {
-        const result = await analyzeResponse.json();
-        const issues = result.issues || [];
-        upsertManualScan(manualKey, {
-          status: "complete",
-          issues,
-          fixPrompt: generateFixPrompt(issues, relativePath),
-          progressLine: void 0
-        });
-        return;
-      }
-      const reader = analyzeResponse.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = "";
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const parts = buffer.split("\n\n");
-        buffer = parts.pop() || "";
-        for (const part of parts) {
-          const lines = part.split("\n");
-          let eventName = "message";
-          let dataStr = "";
-          for (const line of lines) {
-            if (line.startsWith("event:")) eventName = line.slice(6).trim();
-            if (line.startsWith("data:")) dataStr += line.slice(5).trim();
-          }
-          if (!dataStr) continue;
-          try {
-            const data = JSON.parse(dataStr);
-            if (eventName === "progress") {
-              upsertManualScan(manualKey, {
-                status: "scanning",
-                progressLine: data.latestLine || data.phase || "Running analysis\u2026"
-              });
-            } else if (eventName === "done") {
-              const issues = data.issues || [];
-              upsertManualScan(manualKey, {
-                status: "complete",
-                issues,
-                fixPrompt: generateFixPrompt(issues, relativePath),
-                progressLine: void 0
-              });
-            } else if (eventName === "error") {
-              upsertManualScan(manualKey, {
-                status: "error",
-                error: data.error || "Analysis failed",
-                progressLine: void 0
-              });
-            }
-          } catch {
-          }
-        }
-      }
-    } catch (err) {
-      upsertManualScan(manualKey, {
-        status: "error",
-        error: err instanceof Error ? err.message : "An error occurred during scanning",
-        progressLine: void 0
-      });
-    }
-  }, [
-    element.source,
-    element.element,
-    element.rect,
-    componentName,
-    componentLine,
-    generateFixPrompt,
-    manualKey,
-    upsertManualScan,
-    includeChildren
-  ]);
-  const handleCopy = useCallback(
-    async (text) => {
-      try {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      } catch {
-        upsertManualScan(manualKey, {
-          status: "error",
-          error: "Failed to copy to clipboard"
-        });
-      }
-    },
-    [manualKey, upsertManualScan]
-  );
-  const manualStatus = manualScan?.status ?? "idle";
-  const showCachedScanning = cachedIssue?.status === "scanning" && manualStatus === "idle";
-  const showCachedPending = cachedIssue?.status === "pending" && manualStatus === "idle";
-  const showCachedError = cachedIssue?.status === "error" && manualStatus === "idle";
-  const showCachedResult = cachedFixPrompt && manualStatus === "idle";
-  const showScanButton = !cachedIssue && manualStatus === "idle";
-  const showManualResult = manualStatus === "complete" && manualScan?.fixPrompt;
-  const scanning = manualStatus === "scanning";
-  const error = manualScan?.status === "error" ? manualScan.error : null;
-  const fixPrompt = manualScan?.fixPrompt ?? null;
-  const progressLine = manualScan?.progressLine ?? null;
-  const scopeLabel = includeChildren ? "Element + children" : "Element only";
+  const eslintIssues = useMemo(() => {
+    return cachedIssue?.issues || [];
+  }, [cachedIssue]);
+  const showCachedScanning = cachedIssue?.status === "scanning";
+  const showCachedPending = cachedIssue?.status === "pending";
+  const showCachedError = cachedIssue?.status === "error";
+  const showCachedResult = cachedIssue?.status === "complete";
+  const showNoScan = !cachedIssue;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -818,384 +622,36 @@ Please update this component to match our styleguide.`;
             ]
           }
         ),
-        showCachedPending && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "8px",
-                padding: "10px 20px",
-                borderRadius: "8px",
-                backgroundColor: STYLES.bg,
-                color: STYLES.textMuted,
-                fontSize: "12px",
-                marginBottom: "12px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: "8px",
-                      height: "8px",
-                      borderRadius: "50%",
-                      backgroundColor: "rgba(156, 163, 175, 0.5)"
-                    }
-                  }
-                ),
-                "Waiting in scan queue..."
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleScan,
-              disabled: !element.source,
-              style: {
-                padding: "8px 16px",
-                borderRadius: "6px",
-                border: `1px solid ${STYLES.border}`,
-                backgroundColor: "transparent",
-                color: element.source ? STYLES.text : STYLES.textDim,
-                fontSize: "12px",
-                fontWeight: 500,
-                cursor: element.source ? "pointer" : "not-allowed",
-                transition: "all 0.15s"
-              },
-              onMouseEnter: (e) => {
-                if (element.source) {
-                  e.currentTarget.style.borderColor = STYLES.accent;
-                  e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.1)";
-                }
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.borderColor = STYLES.border;
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
-              children: "Scan Now"
-            }
-          ) })
-        ] }),
-        showCachedError && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                padding: "12px",
-                backgroundColor: "rgba(239, 68, 68, 0.1)",
-                border: "1px solid rgba(239, 68, 68, 0.3)",
-                borderRadius: "8px",
-                color: "#EF4444",
-                fontSize: "12px",
-                marginBottom: "12px"
-              },
-              children: "Auto-scan failed for this element"
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: handleScan,
-              disabled: !element.source,
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "8px",
-                padding: "10px 20px",
-                borderRadius: "8px",
-                border: "none",
-                backgroundColor: element.source ? STYLES.success : STYLES.textDim,
-                color: "#FFFFFF",
-                fontSize: "13px",
-                fontWeight: 600,
-                cursor: element.source ? "pointer" : "not-allowed",
-                transition: "background-color 0.15s"
-              },
-              onMouseEnter: (e) => {
-                if (element.source) {
-                  e.currentTarget.style.backgroundColor = "#059669";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (element.source) {
-                  e.currentTarget.style.backgroundColor = STYLES.success;
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(ScanIcon, {}),
-                "Retry Scan"
-              ]
-            }
-          ) })
-        ] }),
-        showCachedResult && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "12px",
-                padding: "8px 12px",
-                backgroundColor: "rgba(16, 185, 129, 0.1)",
-                borderRadius: "6px",
-                fontSize: "11px",
-                color: STYLES.success
-              },
-              children: [
-                /* @__PURE__ */ jsx(CheckIconSmall, {}),
-                "Scan complete"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                marginBottom: "10px"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: "12px",
-                      fontWeight: 600,
-                      color: STYLES.text
-                    },
-                    children: "Fix Prompt"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => handleCopy(cachedFixPrompt),
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "6px",
-                      padding: "6px 12px",
-                      borderRadius: "6px",
-                      border: "none",
-                      backgroundColor: copied ? STYLES.success : STYLES.accent,
-                      color: "#FFFFFF",
-                      fontSize: "11px",
-                      fontWeight: 500,
-                      cursor: "pointer",
-                      transition: "all 0.15s"
-                    },
-                    children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(CheckIcon, {}),
-                      "Copied!"
-                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(CopyIcon, {}),
-                      "Copy"
-                    ] })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                padding: "12px",
-                backgroundColor: STYLES.bg,
-                border: `1px solid ${STYLES.border}`,
-                borderRadius: "8px",
-                fontFamily: STYLES.fontMono,
-                fontSize: "11px",
-                lineHeight: 1.6,
-                whiteSpace: "pre-wrap",
-                color: STYLES.text,
-                maxHeight: "200px",
-                overflow: "auto"
-              },
-              children: cachedFixPrompt
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "12px" }, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleScan,
-              style: {
-                padding: "6px 12px",
-                borderRadius: "6px",
-                border: `1px solid ${STYLES.border}`,
-                backgroundColor: "transparent",
-                color: STYLES.textMuted,
-                fontSize: "11px",
-                cursor: "pointer",
-                transition: "all 0.15s"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.borderColor = STYLES.accent;
-                e.currentTarget.style.color = STYLES.text;
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.borderColor = STYLES.border;
-                e.currentTarget.style.color = STYLES.textMuted;
-              },
-              children: "Rescan"
-            }
-          ) })
-        ] }),
-        showScanButton && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px" }, children: [
-            /* @__PURE__ */ jsxs(
-              "label",
-              {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  fontSize: "12px",
-                  color: STYLES.textMuted,
-                  cursor: "pointer",
-                  userSelect: "none"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "checkbox",
-                      checked: includeChildren,
-                      onChange: (e) => upsertManualScan(manualKey, {
-                        includeChildren: e.currentTarget.checked
-                      })
-                    }
-                  ),
-                  "Include children"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  marginTop: "6px",
-                  fontSize: "11px",
-                  color: STYLES.textDim
-                },
-                children: [
-                  "Scope: ",
-                  scopeLabel
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: handleScan,
-              disabled: !element.source,
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "8px",
-                padding: "12px 24px",
-                borderRadius: "8px",
-                border: "none",
-                backgroundColor: element.source ? STYLES.success : STYLES.textDim,
-                color: "#FFFFFF",
-                fontSize: "14px",
-                fontWeight: 600,
-                cursor: element.source ? "pointer" : "not-allowed",
-                transition: "all 0.15s"
-              },
-              onMouseEnter: (e) => {
-                if (element.source) {
-                  e.currentTarget.style.backgroundColor = "#059669";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (element.source) {
-                  e.currentTarget.style.backgroundColor = STYLES.success;
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(ScanIcon, {}),
-                "Scan for Issues"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                marginTop: "10px",
-                fontSize: "12px",
-                color: STYLES.textMuted
-              },
-              children: "Analyze this component for style issues"
-            }
-          ),
-          !element.source && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                marginTop: "8px",
-                fontSize: "11px",
-                color: STYLES.warning
-              },
-              children: "No source information available"
-            }
-          )
-        ] }),
-        scanning && /* @__PURE__ */ jsxs(
+        showCachedPending && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "16px 0" }, children: /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
-              display: "flex",
-              flexDirection: "column",
+              display: "inline-flex",
               alignItems: "center",
-              justifyContent: "center",
-              padding: "32px 24px",
-              gap: "12px"
+              gap: "8px",
+              padding: "10px 20px",
+              borderRadius: "8px",
+              backgroundColor: STYLES.bg,
+              color: STYLES.textMuted,
+              fontSize: "12px"
             },
             children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   style: {
-                    width: "32px",
-                    height: "32px",
-                    border: `3px solid ${STYLES.border}`,
-                    borderTopColor: STYLES.success,
+                    width: "8px",
+                    height: "8px",
                     borderRadius: "50%",
-                    animation: "uilint-spin 1s linear infinite"
+                    backgroundColor: "rgba(156, 163, 175, 0.5)"
                   }
                 }
               ),
-              /* @__PURE__ */ jsx("div", { style: { color: STYLES.textMuted, fontSize: "13px" }, children: "Analyzing source code..." }),
-              progressLine && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    color: STYLES.textDim,
-                    fontSize: "11px",
-                    fontFamily: STYLES.fontMono,
-                    maxWidth: "320px",
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis"
-                  },
-                  title: progressLine,
-                  children: progressLine
-                }
-              )
+              "Waiting in scan queue..."
             ]
           }
-        ),
-        error && /* @__PURE__ */ jsx(
+        ) }),
+        showCachedError && /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -1204,118 +660,177 @@ Please update this component to match our styleguide.`;
               border: "1px solid rgba(239, 68, 68, 0.3)",
               borderRadius: "8px",
               color: "#EF4444",
-              fontSize: "12px",
-              marginTop: "12px"
+              fontSize: "12px"
             },
-            children: error
+            children: "Auto-scan failed for this element"
           }
         ),
-        showManualResult && /* @__PURE__ */ jsxs("div", { children: [
+        showCachedResult && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs(
             "div",
             {
               style: {
                 display: "flex",
                 alignItems: "center",
-                justifyContent: "space-between",
-                marginBottom: "10px"
+                gap: "8px",
+                marginBottom: "12px",
+                padding: "8px 12px",
+                backgroundColor: "rgba(16, 185, 129, 0.1)",
+                borderRadius: "6px",
+                fontSize: "11px",
+                color: STYLES.success
               },
               children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: "12px",
-                      fontWeight: 600,
-                      color: STYLES.text
-                    },
-                    children: "Fix Prompt"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => {
-                      if (!fixPrompt) return;
-                      handleCopy(fixPrompt);
-                    },
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "6px",
-                      padding: "6px 12px",
-                      borderRadius: "6px",
-                      border: "none",
-                      backgroundColor: copied ? STYLES.success : STYLES.accent,
-                      color: "#FFFFFF",
-                      fontSize: "11px",
-                      fontWeight: 500,
-                      cursor: "pointer",
-                      transition: "all 0.15s"
-                    },
-                    children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(CheckIcon, {}),
-                      "Copied!"
-                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(CopyIcon, {}),
-                      "Copy"
-                    ] })
-                  }
-                )
+                /* @__PURE__ */ jsx(CheckIconSmall, {}),
+                "Scan complete"
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          eslintIssues.length > 0 && /* @__PURE__ */ jsx(ESLintIssuesSection, { issues: eslintIssues }),
+          eslintIssues.length === 0 && /* @__PURE__ */ jsx(
             "div",
             {
               style: {
-                padding: "12px",
-                backgroundColor: STYLES.bg,
-                border: `1px solid ${STYLES.border}`,
-                borderRadius: "8px",
-                fontFamily: STYLES.fontMono,
-                fontSize: "11px",
-                lineHeight: 1.6,
-                whiteSpace: "pre-wrap",
-                color: STYLES.text,
-                maxHeight: "200px",
-                overflow: "auto"
-              },
-              children: fixPrompt
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "12px" }, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                handleScan();
-              },
-              style: {
-                padding: "6px 12px",
-                borderRadius: "6px",
-                border: `1px solid ${STYLES.border}`,
-                backgroundColor: "transparent",
+                padding: "16px",
+                textAlign: "center",
                 color: STYLES.textMuted,
-                fontSize: "11px",
-                cursor: "pointer",
-                transition: "all 0.15s"
+                fontSize: "12px"
               },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.borderColor = STYLES.accent;
-                e.currentTarget.style.color = STYLES.text;
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.borderColor = STYLES.border;
-                e.currentTarget.style.color = STYLES.textMuted;
-              },
-              children: "Scan Again"
+              children: "No issues found"
             }
-          ) })
-        ] })
+          )
+        ] }),
+        showNoScan && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              textAlign: "center",
+              color: STYLES.textMuted,
+              fontSize: "12px"
+            },
+            children: "Run auto-scan to analyze this element"
+          }
+        )
       ] })
     }
   );
 }
+function ESLintIssuesSection({ issues }) {
+  if (issues.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          marginBottom: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(ESLintIcon, {}),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                fontWeight: 600,
+                color: STYLES.text
+              },
+              children: [
+                "ESLint Issues (",
+                issues.length,
+                ")"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px"
+        },
+        children: issues.map((issue, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "10px 12px",
+              backgroundColor: "rgba(239, 68, 68, 0.1)",
+              border: "1px solid rgba(239, 68, 68, 0.2)",
+              borderRadius: "6px"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(WarningIcon, {}),
+                  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: STYLES.text,
+                          lineHeight: 1.4,
+                          marginBottom: "4px"
+                        },
+                        children: issue.message
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "12px",
+                          fontSize: "10px",
+                          color: STYLES.textDim,
+                          fontFamily: STYLES.fontMono
+                        },
+                        children: [
+                          issue.ruleId && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                padding: "2px 6px",
+                                backgroundColor: "rgba(239, 68, 68, 0.15)",
+                                borderRadius: "4px",
+                                color: "#EF4444"
+                              },
+                              children: issue.ruleId
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            "Line ",
+                            issue.line,
+                            issue.column ? `:${issue.column}` : ""
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          },
+          index
+        ))
+      }
+    )
+  ] });
+}
 function CheckIconSmall() {
   return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
@@ -1472,52 +987,39 @@ function CloseIcon() {
     }
   ) });
 }
-function ScanIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+function ESLintIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83",
-      stroke: "currentColor",
+      d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
+      stroke: "#EF4444",
       strokeWidth: "2",
-      strokeLinecap: "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   ) });
 }
-function CopyIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: "9",
-        y: "9",
-        width: "13",
-        height: "13",
-        rx: "2",
-        stroke: "currentColor",
-        strokeWidth: "2"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1",
-        stroke: "currentColor",
-        strokeWidth: "2"
-      }
-    )
-  ] });
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
+function WarningIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
     {
-      d: "M20 6L9 17l-5-5",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style: { flexShrink: 0, marginTop: "1px" },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z",
+          stroke: "#EF4444",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
     }
-  ) });
+  );
 }
 
 export {