uilint-react 0.1.19 → 0.1.21

package/dist/{chunk-3TA6OKS6.js → chunk-CWCKS753.js}

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-7WYVWDRU.js";
+} from "./chunk-EBU7YY73.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback } from "react";
@@ -11,7 +11,7 @@ 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/dev/source";
+var API_ENDPOINT = "/api/.uilint/source";
 async function fetchSource(filePath) {
   const cached = sourceCache.get(filePath);
   if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
@@ -82,7 +82,7 @@ async function prefetchSources(filePaths) {
 }
 
 // src/components/ui-lint/InspectionPanel.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var STYLES = {
   bg: "rgba(17, 24, 39, 0.95)",
   bgSurface: "rgba(31, 41, 55, 0.9)",
@@ -92,23 +92,24 @@ var STYLES = {
   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 = 400;
+var PANEL_WIDTH = 420;
 function InspectionPanel() {
-  const { selectedElement, setSelectedElement, sourceFiles } = useUILintContext();
+  const { inspectedElement, setInspectedElement } = useUILintContext();
   const [mounted, setMounted] = useState(false);
-  const [activeTab, setActiveTab] = useState("info");
+  const [activeTab, setActiveTab] = useState(
+    "info"
+  );
   useEffect(() => {
     setMounted(true);
   }, []);
-  const sourceFile = selectedElement ? sourceFiles.find(
-    (f) => f.elements.some((e) => e.id === selectedElement.id)
-  ) ?? null : null;
-  if (!mounted) return null;
+  if (!mounted || !inspectedElement) return null;
   const content = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -118,16 +119,15 @@ function InspectionPanel() {
         top: 0,
         right: 0,
         bottom: 0,
-        width: selectedElement ? PANEL_WIDTH : 0,
+        width: PANEL_WIDTH,
         backgroundColor: STYLES.bg,
         backdropFilter: STYLES.blur,
         WebkitBackdropFilter: STYLES.blur,
         borderLeft: `1px solid ${STYLES.border}`,
-        boxShadow: selectedElement ? STYLES.shadow : "none",
+        boxShadow: STYLES.shadow,
         fontFamily: STYLES.font,
         color: STYLES.text,
         overflow: "hidden",
-        transition: "width 0.2s ease-out",
         zIndex: 99998
       },
       children: [
@@ -136,8 +136,12 @@ function InspectionPanel() {
           from { transform: translateX(100%); }
           to { transform: translateX(0); }
         }
+        @keyframes uilint-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
       ` }),
-        selectedElement && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -150,9 +154,8 @@ function InspectionPanel() {
               /* @__PURE__ */ jsx(
                 PanelHeader,
                 {
-                  element: selectedElement,
-                  sourceFile,
-                  onClose: () => setSelectedElement(null)
+                  element: inspectedElement,
+                  onClose: () => setInspectedElement(null)
                 }
               ),
               /* @__PURE__ */ jsxs(
@@ -178,11 +181,24 @@ function InspectionPanel() {
                         active: activeTab === "source",
                         onClick: () => setActiveTab("source")
                       }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TabButton,
+                      {
+                        label: "Scan",
+                        active: activeTab === "scan",
+                        onClick: () => setActiveTab("scan"),
+                        accent: true
+                      }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: activeTab === "info" ? /* @__PURE__ */ jsx(InfoTab, { element: selectedElement, sourceFile }) : /* @__PURE__ */ jsx(SourceTab, { element: selectedElement }) })
+              /* @__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 })
+              ] })
             ]
           }
         )
@@ -193,11 +209,10 @@ function InspectionPanel() {
 }
 function PanelHeader({
   element,
-  sourceFile,
   onClose
 }) {
-  const componentName = element.componentStack[0]?.name || element.tagName.toUpperCase();
-  const handleOpenInEditor = useCallback(() => {
+  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");
@@ -215,32 +230,19 @@ function PanelHeader({
         backgroundColor: STYLES.bgSurface
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-          sourceFile && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: "12px",
-                height: "12px",
-                borderRadius: "50%",
-                backgroundColor: sourceFile.color
-              }
-            }
-          ),
-          /* @__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.tagName,
-              ">"
-            ] })
+        /* @__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: handleOpenInEditor,
+              onClick: handleOpenInCursor,
               style: {
                 display: "flex",
                 alignItems: "center",
@@ -261,9 +263,10 @@ function PanelHeader({
               onMouseLeave: (e) => {
                 e.currentTarget.style.backgroundColor = STYLES.accent;
               },
+              title: "Open in Cursor",
               children: [
-                /* @__PURE__ */ jsx(OpenIcon, {}),
-                "Open"
+                /* @__PURE__ */ jsx(CursorIcon, {}),
+                "Open in Cursor"
               ]
             }
           ),
@@ -303,7 +306,8 @@ function PanelHeader({
 function TabButton({
   label,
   active,
-  onClick
+  onClick,
+  accent
 }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -314,11 +318,11 @@ function TabButton({
         padding: "10px 16px",
         border: "none",
         backgroundColor: "transparent",
-        color: active ? STYLES.accent : STYLES.textMuted,
+        color: active ? accent ? STYLES.success : STYLES.accent : STYLES.textMuted,
         fontSize: "12px",
         fontWeight: 500,
         cursor: "pointer",
-        borderBottom: active ? `2px solid ${STYLES.accent}` : "2px solid transparent",
+        borderBottom: active ? `2px solid ${accent ? STYLES.success : STYLES.accent}` : "2px solid transparent",
         marginBottom: "-1px",
         transition: "all 0.15s"
       },
@@ -326,61 +330,44 @@ function TabButton({
     }
   );
 }
-function InfoTab({
-  element,
-  sourceFile
-}) {
+function InfoTab({ element }) {
   return /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
     /* @__PURE__ */ jsxs(Section, { title: "Element", children: [
-      /* @__PURE__ */ jsx(InfoRow, { label: "Tag", value: `<${element.tagName}>` }),
-      element.className && /* @__PURE__ */ jsx(InfoRow, { label: "Classes", value: element.className, mono: true }),
-      element.source && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         InfoRow,
         {
-          label: "Location",
-          value: `Line ${element.source.lineNumber}${element.source.columnNumber ? `, Col ${element.source.columnNumber}` : ""}`
+          label: "Tag",
+          value: `<${element.element.tagName.toLowerCase()}>`
         }
-      )
-    ] }),
-    sourceFile && /* @__PURE__ */ jsxs(Section, { title: "Source File", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
+      ),
+      element.element.className && /* @__PURE__ */ jsx(
+        InfoRow,
         {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            marginBottom: "8px"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "10px",
-                  height: "10px",
-                  borderRadius: "50%",
-                  backgroundColor: sourceFile.color
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", fontWeight: 500 }, children: sourceFile.displayName })
-          ]
+          label: "Classes",
+          value: typeof element.element.className === "string" ? element.element.className : "",
+          mono: true
         }
       ),
-      /* @__PURE__ */ jsx(
-        "div",
+      element.source && /* @__PURE__ */ jsx(
+        InfoRow,
         {
-          style: {
-            fontSize: "11px",
-            color: STYLES.textDim,
-            fontFamily: STYLES.fontMono,
-            wordBreak: "break-all"
-          },
-          children: sourceFile.path
+          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,
@@ -570,6 +557,299 @@ function SourceTab({ element }) {
     )
   ] });
 }
+function ScanTab({ element }) {
+  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 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 || [];
+      if (issues.length === 0) {
+        setFixPrompt(
+          `No style issues found in the \`${componentName}\` component in \`${relativePath}\`. The component appears to follow the styleguide.`
+        );
+      } else {
+        const issueList = issues.map((issue) => {
+          const lineInfo = issue.line ? `Line ${issue.line}: ` : "";
+          return `- ${lineInfo}${issue.message}`;
+        }).join("\n");
+        setFixPrompt(
+          `Fix the following style issues in the \`${componentName}\` component in \`${relativePath}\`:
+
+Issues found:
+${issueList}
+
+Please update this component to match our styleguide.`
+        );
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "An error occurred during scanning"
+      );
+    } finally {
+      setScanning(false);
+    }
+  }, [element.source, componentName, componentLine]);
+  const handleCopy = useCallback(async () => {
+    if (!fixPrompt) return;
+    try {
+      await navigator.clipboard.writeText(fixPrompt);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      setError("Failed to copy to clipboard");
+    }
+  }, [fixPrompt]);
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
+    !fixPrompt && !scanning && /* @__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"
+        },
+        children: error
+      }
+    ),
+    fixPrompt && /* @__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,
+                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 Section({
   title,
   children
@@ -690,7 +970,7 @@ function ComponentStackItem({
     }
   );
 }
-function OpenIcon() {
+function CursorIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
     {
@@ -714,6 +994,53 @@ function CloseIcon() {
     }
   ) });
 }
+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,