uilint-react 0.1.23 → 0.1.25

package/dist/{chunk-7M2NF7HT.js → chunk-ORYG2TNM.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-XPAUSE5Z.js";
+} from "./chunk-45MPASAN.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/{chunk-ZMGUWRAO.js → chunk-RA27RIJ2.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-XPAUSE5Z.js";
+} from "./chunk-45MPASAN.js";
 
 // src/components/ui-lint/LocatorOverlay.tsx
 import { useState, useEffect, useMemo } from "react";

package/dist/{chunk-7BJIS7PI.js → chunk-SIVHTQ2P.js}

@@ -2,10 +2,10 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-XPAUSE5Z.js";
+} from "./chunk-45MPASAN.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/ui-lint/source-fetcher.ts
@@ -558,12 +558,58 @@ function SourceTab({ element }) {
   ] });
 }
 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");
@@ -574,7 +620,9 @@ function ScanTab({ element }) {
     setFixPrompt(null);
     try {
       const sourceResponse = await fetch(
-        `/api/.uilint/source?path=${encodeURIComponent(element.source.fileName)}`
+        `/api/.uilint/source?path=${encodeURIComponent(
+          element.source.fileName
+        )}`
       );
       if (!sourceResponse.ok) {
         throw new Error("Failed to fetch source code");
@@ -597,24 +645,7 @@ function ScanTab({ element }) {
       }
       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.`
-        );
-      }
+      setFixPrompt(generateFixPrompt(issues, relativePath));
     } catch (err) {
       setError(
         err instanceof Error ? err.message : "An error occurred during scanning"
@@ -622,19 +653,282 @@ Please update this component to match our styleguide.`
     } finally {
       setScanning(false);
     }
-  }, [element.source, componentName, componentLine]);
-  const handleCopy = useCallback(async () => {
-    if (!fixPrompt) return;
+  }, [element.source, componentName, componentLine, generateFixPrompt]);
+  const handleCopy = useCallback(async (text) => {
     try {
-      await navigator.clipboard.writeText(fixPrompt);
+      await navigator.clipboard.writeText(text);
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
     } catch {
       setError("Failed to copy to clipboard");
     }
-  }, [fixPrompt]);
+  }, []);
+  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: [
-    !fixPrompt && !scanning && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "24px 0" }, 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",
         {
@@ -731,12 +1025,13 @@ Please update this component to match our styleguide.`
           border: "1px solid rgba(239, 68, 68, 0.3)",
           borderRadius: "8px",
           color: "#EF4444",
-          fontSize: "13px"
+          fontSize: "13px",
+          marginTop: "16px"
         },
         children: error
       }
     ),
-    fixPrompt && /* @__PURE__ */ jsxs("div", { children: [
+    showManualResult && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -761,7 +1056,7 @@ Please update this component to match our styleguide.`
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: handleCopy,
+                onClick: () => handleCopy(fixPrompt),
                 style: {
                   display: "flex",
                   alignItems: "center",
@@ -850,6 +1145,18 @@ Please update this component to match our styleguide.`
     ] })
   ] });
 }
+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

package/dist/index.d.ts

@@ -88,6 +88,8 @@ interface InspectedElement {
     source: SourceLocation | null;
     componentStack: ComponentInfo[];
     rect: DOMRect;
+    /** Optional ID from auto-scan to link to cached results */
+    scannedElementId?: string;
 }
 /**
  * Context value provided by UILintProvider
@@ -157,6 +159,7 @@ declare const DATA_UILINT_ID = "data-ui-lint-id";
 
 /**
  * Hook to access UILint context
+ * For backwards compatibility - delegates to Zustand store
  */
 declare function useUILintContext(): UILintContextValue;
 /**

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-7M2NF7HT.js";
+} from "./chunk-ORYG2TNM.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-7BJIS7PI.js";
+} from "./chunk-SIVHTQ2P.js";
 import {
   LocatorOverlay
-} from "./chunk-ZMGUWRAO.js";
+} from "./chunk-RA27RIJ2.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-XPAUSE5Z.js";
+} from "./chunk-45MPASAN.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,8 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.23"
+    "uilint-core": "^0.1.25",
+    "zustand": "^5.0.5"
   },
   "peerDependencies": {
     "react": "^19.0.0",