uilint-react 0.1.24 → 0.1.26

package/dist/chunk-FWYNI6JG.js

@@ -1,1359 +0,0 @@
-"use client";
-import {
-  buildEditorUrl,
-  useUILintContext
-} from "./chunk-I4C3NAUH.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: "Info",
-                        active: activeTab === "info",
-                        onClick: () => setActiveTab("info")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TabButton,
-                      {
-                        label: "Source",
-                        active: activeTab === "source",
-                        onClick: () => setActiveTab("source")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      TabButton,
-                      {
-                        label: "Scan",
-                        active: activeTab === "scan",
-                        onClick: () => setActiveTab("scan"),
-                        accent: true
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto" }, children: [
-                activeTab === "info" && /* @__PURE__ */ jsx(InfoTab, { element: inspectedElement }),
-                activeTab === "source" && /* @__PURE__ */ jsx(SourceTab, { element: inspectedElement }),
-                activeTab === "scan" && /* @__PURE__ */ jsx(ScanTab, { 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,
-  accent
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick,
-      style: {
-        flex: 1,
-        padding: "10px 16px",
-        border: "none",
-        backgroundColor: "transparent",
-        color: active ? accent ? STYLES.success : STYLES.accent : STYLES.textMuted,
-        fontSize: "12px",
-        fontWeight: 500,
-        cursor: "pointer",
-        borderBottom: active ? `2px solid ${accent ? STYLES.success : STYLES.accent}` : "2px solid transparent",
-        marginBottom: "-1px",
-        transition: "all 0.15s"
-      },
-      children: label
-    }
-  );
-}
-function InfoTab({ element }) {
-  return /* @__PURE__ */ jsxs("div", { style: { 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 ScanTab({ element }) {
-  const { elementIssuesCache, autoScanState } = useUILintContext();
-  const [scanning, setScanning] = useState(false);
-  const [error, setError] = useState(null);
-  const [fixPrompt, setFixPrompt] = useState(null);
-  const [copied, setCopied] = useState(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);
-      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) {
-      setError("No source information available");
-      return;
-    }
-    setScanning(true);
-    setError(null);
-    setFixPrompt(null);
-    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
-        })
-      });
-      if (!analyzeResponse.ok) {
-        throw new Error("Failed to analyze source code");
-      }
-      const result = await analyzeResponse.json();
-      const issues = result.issues || [];
-      setFixPrompt(generateFixPrompt(issues, relativePath));
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "An error occurred during scanning"
-      );
-    } finally {
-      setScanning(false);
-    }
-  }, [element.source, componentName, componentLine, generateFixPrompt]);
-  const handleCopy = useCallback(async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      setError("Failed to copy to clipboard");
-    }
-  }, []);
-  const showCachedScanning = cachedIssue?.status === "scanning" && !scanning && !fixPrompt;
-  const showCachedPending = cachedIssue?.status === "pending" && !scanning && !fixPrompt;
-  const showCachedError = cachedIssue?.status === "error" && !scanning && !fixPrompt;
-  const showCachedResult = cachedFixPrompt && !fixPrompt && !scanning;
-  const showScanButton = !cachedIssue && !fixPrompt && !scanning;
-  const showManualResult = fixPrompt && !scanning;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
-    showCachedScanning && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "48px 24px",
-          gap: "16px"
-        },
-        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: "24px 0" }, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "12px 24px",
-            borderRadius: "8px",
-            backgroundColor: STYLES.bgSurface,
-            color: STYLES.textMuted,
-            fontSize: "13px"
-          },
-          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", { style: { marginTop: "16px" }, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: handleScan,
-          disabled: !element.source,
-          style: {
-            padding: "8px 16px",
-            borderRadius: "6px",
-            border: `1px solid ${STYLES.border}`,
-            backgroundColor: "transparent",
-            color: STYLES.textMuted,
-            fontSize: "12px",
-            cursor: element.source ? "pointer" : "not-allowed",
-            transition: "all 0.15s"
-          },
-          onMouseEnter: (e) => {
-            if (element.source) {
-              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 Now"
-        }
-      ) })
-    ] }),
-    showCachedError && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            padding: "16px",
-            backgroundColor: "rgba(239, 68, 68, 0.1)",
-            border: "1px solid rgba(239, 68, 68, 0.3)",
-            borderRadius: "8px",
-            color: "#EF4444",
-            fontSize: "13px",
-            marginBottom: "16px"
-          },
-          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"
-          },
-          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, {}),
-            "Results from auto-scan"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: "12px"
-          },
-          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 to Clipboard"
-                ] })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            backgroundColor: STYLES.bgSurface,
-            border: `1px solid ${STYLES.border}`,
-            borderRadius: "8px",
-            fontFamily: STYLES.fontMono,
-            fontSize: "12px",
-            lineHeight: 1.6,
-            whiteSpace: "pre-wrap",
-            color: STYLES.text,
-            maxHeight: "300px",
-            overflow: "auto"
-          },
-          children: cachedFixPrompt
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            marginTop: "12px",
-            fontSize: "11px",
-            color: STYLES.textMuted,
-            textAlign: "center"
-          },
-          children: "Paste this prompt into Cursor to fix the issues"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: handleScan,
-          style: {
-            padding: "8px 16px",
-            borderRadius: "6px",
-            border: `1px solid ${STYLES.border}`,
-            backgroundColor: "transparent",
-            color: STYLES.textMuted,
-            fontSize: "12px",
-            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: "24px 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 with LLM"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            marginTop: "12px",
-            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: "48px 24px",
-          gap: "16px"
-        },
-        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..." })
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "16px",
-          backgroundColor: "rgba(239, 68, 68, 0.1)",
-          border: "1px solid rgba(239, 68, 68, 0.3)",
-          borderRadius: "8px",
-          color: "#EF4444",
-          fontSize: "13px",
-          marginTop: "16px"
-        },
-        children: error
-      }
-    ),
-    showManualResult && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: "12px"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: "12px",
-                  fontWeight: 600,
-                  color: STYLES.text
-                },
-                children: "Fix Prompt"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => 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 to Clipboard"
-                ] })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            backgroundColor: STYLES.bgSurface,
-            border: `1px solid ${STYLES.border}`,
-            borderRadius: "8px",
-            fontFamily: STYLES.fontMono,
-            fontSize: "12px",
-            lineHeight: 1.6,
-            whiteSpace: "pre-wrap",
-            color: STYLES.text,
-            maxHeight: "300px",
-            overflow: "auto"
-          },
-          children: fixPrompt
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            marginTop: "12px",
-            fontSize: "11px",
-            color: STYLES.textMuted,
-            textAlign: "center"
-          },
-          children: "Paste this prompt into Cursor to fix the issues"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => {
-            setFixPrompt(null);
-            handleScan();
-          },
-          style: {
-            padding: "8px 16px",
-            borderRadius: "6px",
-            border: `1px solid ${STYLES.border}`,
-            backgroundColor: "transparent",
-            color: STYLES.textMuted,
-            fontSize: "12px",
-            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
-};