uilint-react 0.1.25 → 0.1.26

package/dist/chunk-QYRESGFG.js

@@ -0,0 +1,1463 @@
+"use client";
+import {
+  buildEditorUrl,
+  useUILintContext,
+  useUILintStore
+} from "./chunk-5VJ2Q2QW.js";
+
+// src/components/ui-lint/InspectionPanel.tsx
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/ui-lint/source-fetcher.ts
+var sourceCache = /* @__PURE__ */ new Map();
+var CACHE_TTL = 5 * 60 * 1e3;
+var API_ENDPOINT = "/api/.uilint/source";
+async function fetchSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
+    return {
+      content: cached.content,
+      relativePath: cached.relativePath
+    };
+  }
+  try {
+    const response = await fetch(
+      `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
+    );
+    if (!response.ok) {
+      console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
+      return null;
+    }
+    const data = await response.json();
+    sourceCache.set(filePath, {
+      ...data,
+      fetchedAt: Date.now()
+    });
+    return data;
+  } catch (error) {
+    console.error("[UILint] Error fetching source:", error);
+    return null;
+  }
+}
+async function fetchSourceWithContext(source, contextLines = 5) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - contextLines);
+  const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+function clearSourceCache() {
+  sourceCache.clear();
+}
+function getCachedSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (!cached) return null;
+  if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
+    sourceCache.delete(filePath);
+    return null;
+  }
+  return {
+    content: cached.content,
+    relativePath: cached.relativePath
+  };
+}
+async function prefetchSources(filePaths) {
+  const uniquePaths = [...new Set(filePaths)].filter((path) => {
+    const cached = sourceCache.get(path);
+    return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
+  });
+  const BATCH_SIZE = 5;
+  for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
+    const batch = uniquePaths.slice(i, i + BATCH_SIZE);
+    await Promise.all(batch.map(fetchSource));
+  }
+}
+
+// src/components/ui-lint/InspectionPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STYLES = {
+  bg: "rgba(17, 24, 39, 0.95)",
+  bgSurface: "rgba(31, 41, 55, 0.9)",
+  border: "rgba(75, 85, 99, 0.5)",
+  text: "#F9FAFB",
+  textMuted: "#9CA3AF",
+  textDim: "#6B7280",
+  accent: "#3B82F6",
+  accentHover: "#2563EB",
+  success: "#10B981",
+  warning: "#F59E0B",
+  shadow: "0 -8px 32px rgba(0, 0, 0, 0.4)",
+  blur: "blur(16px)",
+  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
+};
+var PANEL_WIDTH = 420;
+function InspectionPanel() {
+  const { inspectedElement, setInspectedElement } = useUILintContext();
+  const [mounted, setMounted] = useState(false);
+  const [activeTab, setActiveTab] = useState("info");
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || !inspectedElement) return null;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ui-lint": true,
+      style: {
+        position: "fixed",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: PANEL_WIDTH,
+        backgroundColor: STYLES.bg,
+        backdropFilter: STYLES.blur,
+        WebkitBackdropFilter: STYLES.blur,
+        borderLeft: `1px solid ${STYLES.border}`,
+        boxShadow: STYLES.shadow,
+        fontFamily: STYLES.font,
+        color: STYLES.text,
+        overflow: "hidden",
+        zIndex: 99998
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes uilint-panel-slide-in {
+          from { transform: translateX(100%); }
+          to { transform: translateX(0); }
+        }
+        @keyframes uilint-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              height: "100%",
+              animation: "uilint-panel-slide-in 0.2s ease-out"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                PanelHeader,
+                {
+                  element: inspectedElement,
+                  onClose: () => setInspectedElement(null)
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    borderBottom: `1px solid ${STYLES.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      TabButton,
+                      {
+                        label: "Inspect",
+                        active: activeTab === "info",
+                        onClick: () => setActiveTab("info")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TabButton,
+                      {
+                        label: "Source",
+                        active: activeTab === "source",
+                        onClick: () => setActiveTab("source")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto" }, children: [
+                activeTab === "info" && /* @__PURE__ */ jsx(InfoTab, { element: inspectedElement }),
+                activeTab === "source" && /* @__PURE__ */ jsx(SourceTab, { element: inspectedElement })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return createPortal(content, document.body);
+}
+function PanelHeader({
+  element,
+  onClose
+}) {
+  const componentName = element.componentStack[0]?.name || element.element.tagName.toLowerCase();
+  const handleOpenInCursor = useCallback(() => {
+    if (element.source) {
+      const url = buildEditorUrl(element.source, "cursor");
+      window.open(url, "_blank");
+    }
+  }, [element.source]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 16px",
+        borderBottom: `1px solid ${STYLES.border}`,
+        backgroundColor: STYLES.bgSurface
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: componentName }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: [
+            "<",
+            element.element.tagName.toLowerCase(),
+            ">"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+          element.source && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleOpenInCursor,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "6px 10px",
+                borderRadius: "6px",
+                border: "none",
+                backgroundColor: STYLES.accent,
+                color: "#FFFFFF",
+                fontSize: "11px",
+                fontWeight: 500,
+                cursor: "pointer",
+                transition: "background-color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = STYLES.accentHover;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = STYLES.accent;
+              },
+              title: "Open in Cursor",
+              children: [
+                /* @__PURE__ */ jsx(CursorIcon, {}),
+                "Open in Cursor"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "28px",
+                height: "28px",
+                borderRadius: "6px",
+                border: "none",
+                backgroundColor: "transparent",
+                color: STYLES.textMuted,
+                cursor: "pointer",
+                transition: "all 0.15s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = STYLES.bgSurface;
+                e.currentTarget.style.color = STYLES.text;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.color = STYLES.textMuted;
+              },
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function TabButton({
+  label,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        flex: 1,
+        padding: "10px 16px",
+        border: "none",
+        backgroundColor: "transparent",
+        color: active ? STYLES.accent : STYLES.textMuted,
+        fontSize: "12px",
+        fontWeight: 500,
+        cursor: "pointer",
+        borderBottom: active ? `2px solid ${STYLES.accent}` : "2px solid transparent",
+        marginBottom: "-1px",
+        transition: "all 0.15s"
+      },
+      children: label
+    }
+  );
+}
+function InfoTab({ element }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsx(ScanSection, { element }),
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
+      /* @__PURE__ */ jsxs(Section, { title: "Element", children: [
+        /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Tag",
+            value: `<${element.element.tagName.toLowerCase()}>`
+          }
+        ),
+        element.element.className && /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Classes",
+            value: typeof element.element.className === "string" ? element.element.className : "",
+            mono: true
+          }
+        ),
+        element.source && /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Location",
+            value: `Line ${element.source.lineNumber}${element.source.columnNumber ? `, Col ${element.source.columnNumber}` : ""}`
+          }
+        )
+      ] }),
+      element.source && /* @__PURE__ */ jsx(Section, { title: "Source File", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: "11px",
+            color: STYLES.textDim,
+            fontFamily: STYLES.fontMono,
+            wordBreak: "break-all"
+          },
+          children: element.source.fileName
+        }
+      ) }),
+      element.componentStack.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Component Stack", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { display: "flex", flexDirection: "column", gap: "4px" },
+          children: [
+            element.componentStack.slice(0, 10).map((comp, index) => /* @__PURE__ */ jsx(
+              ComponentStackItem,
+              {
+                component: comp,
+                index,
+                isFirst: index === 0
+              },
+              index
+            )),
+            element.componentStack.length > 10 && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  fontSize: "11px",
+                  color: STYLES.textDim,
+                  marginTop: "4px"
+                },
+                children: [
+                  "...and ",
+                  element.componentStack.length - 10,
+                  " more"
+                ]
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Section, { title: "Dimensions", children: [
+        /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Size",
+            value: `${Math.round(element.rect.width)} \xD7 ${Math.round(
+              element.rect.height
+            )}px`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InfoRow,
+          {
+            label: "Position",
+            value: `(${Math.round(element.rect.left)}, ${Math.round(
+              element.rect.top
+            )})`
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function SourceTab({ element }) {
+  const [sourceData, setSourceData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!element.source) {
+      setError("No source information available");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    fetchSourceWithContext(element.source, 8).then((data) => {
+      if (data) {
+        setSourceData(data);
+      } else {
+        setError("Failed to load source file");
+      }
+    }).catch(() => {
+      setError("Failed to load source file");
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [element.source]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "48px",
+          color: STYLES.textMuted,
+          fontSize: "13px"
+        },
+        children: "Loading source..."
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "48px",
+          color: STYLES.textMuted,
+          fontSize: "13px"
+        },
+        children: error
+      }
+    );
+  }
+  if (!sourceData) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          marginBottom: "8px",
+          backgroundColor: STYLES.bgSurface,
+          borderRadius: "6px",
+          fontSize: "11px",
+          fontFamily: STYLES.fontMono,
+          color: STYLES.textMuted,
+          wordBreak: "break-all"
+        },
+        children: sourceData.relativePath
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          backgroundColor: STYLES.bgSurface,
+          borderRadius: "8px",
+          overflow: "hidden",
+          border: `1px solid ${STYLES.border}`
+        },
+        children: /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              margin: 0,
+              padding: "12px 0",
+              overflow: "auto",
+              fontSize: "12px",
+              lineHeight: "1.6",
+              fontFamily: STYLES.fontMono
+            },
+            children: sourceData.lines.map((line, index) => {
+              const lineNumber = sourceData.startLine + index;
+              const isHighlight = lineNumber === sourceData.highlightLine;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    backgroundColor: isHighlight ? "rgba(59, 130, 246, 0.2)" : "transparent",
+                    borderLeft: isHighlight ? `3px solid ${STYLES.accent}` : "3px solid transparent"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-block",
+                          width: "48px",
+                          paddingRight: "12px",
+                          textAlign: "right",
+                          color: isHighlight ? STYLES.accent : STYLES.textDim,
+                          userSelect: "none",
+                          flexShrink: 0
+                        },
+                        children: lineNumber
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "code",
+                      {
+                        style: {
+                          color: isHighlight ? STYLES.text : STYLES.textMuted,
+                          whiteSpace: "pre"
+                        },
+                        children: line || " "
+                      }
+                    )
+                  ]
+                },
+                lineNumber
+              );
+            })
+          }
+        )
+      }
+    )
+  ] });
+}
+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 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);
+      if (cached) return cached;
+    }
+    if (element.source) {
+      for (const [, issue] of elementIssuesCache) {
+        const scannedElement = autoScanState.elements.find(
+          (el) => el.id === issue.elementId
+        );
+        if (scannedElement?.source?.fileName === element.source.fileName) {
+          return issue;
+        }
+      }
+    }
+    return null;
+  }, [
+    element.scannedElementId,
+    element.source,
+    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;
+    }
+    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 dataLoc = element.element.getAttribute("data-loc");
+      const analyzeResponse = await fetch("/api/.uilint/analyze", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sourceCode,
+          filePath: relativePath,
+          componentName,
+          componentLine,
+          dataLocs: dataLoc ? [dataLoc] : 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
+  ]);
+  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;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${STYLES.border}`,
+        backgroundColor: STYLES.bgSurface
+      },
+      children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
+        showCachedScanning && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "32px 24px",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "32px",
+                    height: "32px",
+                    border: `3px solid ${STYLES.border}`,
+                    borderTopColor: STYLES.success,
+                    borderRadius: "50%",
+                    animation: "uilint-spin 1s linear infinite"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { color: STYLES.textMuted, fontSize: "13px" }, children: "Auto-scan in progress..." })
+            ]
+          }
+        ),
+        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(
+            "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(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "32px 24px",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "32px",
+                    height: "32px",
+                    border: `3px solid ${STYLES.border}`,
+                    borderTopColor: STYLES.success,
+                    borderRadius: "50%",
+                    animation: "uilint-spin 1s linear infinite"
+                  }
+                }
+              ),
+              /* @__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
+                }
+              )
+            ]
+          }
+        ),
+        error && /* @__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",
+              marginTop: "12px"
+            },
+            children: error
+          }
+        ),
+        showManualResult && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__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: () => {
+                      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(
+            "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",
+                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: "Scan Again"
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+function CheckIconSmall() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M20 6L9 17l-5-5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function Section({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: "11px",
+          fontWeight: 600,
+          color: STYLES.textDim,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          marginBottom: "8px"
+        },
+        children: title
+      }
+    ),
+    children
+  ] });
+}
+function InfoRow({
+  label,
+  value,
+  mono
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        fontSize: "12px",
+        marginBottom: "4px"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { color: STYLES.textMuted }, children: label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: STYLES.text,
+              fontFamily: mono ? STYLES.fontMono : void 0,
+              textAlign: "right",
+              maxWidth: "200px",
+              wordBreak: "break-word"
+            },
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+function ComponentStackItem({
+  component,
+  index,
+  isFirst
+}) {
+  const handleClick = useCallback(() => {
+    if (component.source) {
+      const url = buildEditorUrl(component.source, "cursor");
+      window.open(url, "_blank");
+    }
+  }, [component.source]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "6px 8px",
+        marginLeft: index * 8,
+        backgroundColor: isFirst ? "rgba(59, 130, 246, 0.1)" : "transparent",
+        borderRadius: "4px",
+        cursor: component.source ? "pointer" : "default",
+        transition: "background-color 0.15s"
+      },
+      onClick: handleClick,
+      onMouseEnter: (e) => {
+        if (component.source) {
+          e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.15)";
+        }
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = isFirst ? "rgba(59, 130, 246, 0.1)" : "transparent";
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "12px",
+              fontWeight: isFirst ? 600 : 400,
+              color: isFirst ? STYLES.accent : STYLES.textMuted
+            },
+            children: component.name
+          }
+        ),
+        component.source && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: "10px",
+              color: STYLES.textDim,
+              fontFamily: STYLES.fontMono
+            },
+            children: [
+              ":",
+              component.source.lineNumber
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CursorIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M18 6L6 18M6 6l12 12",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", 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",
+      strokeWidth: "2",
+      strokeLinecap: "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",
+    {
+      d: "M20 6L9 17l-5-5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+export {
+  fetchSource,
+  fetchSourceWithContext,
+  clearSourceCache,
+  getCachedSource,
+  prefetchSources,
+  InspectionPanel
+};