uilint-react 0.1.15 → 0.1.17

package/dist/index.js

@@ -6,28 +6,208 @@ import {
   useContext,
   useState as useState4,
   useEffect as useEffect2,
-  useCallback,
+  useCallback as useCallback2,
   useRef
 } from "react";
 
-// src/scanner/dom-scanner.ts
-import {
-  extractStylesFromDOM,
-  createStyleSummary,
-  serializeStyles,
-  truncateHTML
-} from "uilint-core";
-function scanDOM(root) {
-  const targetRoot = root || document.body;
-  const styles = extractStylesFromDOM(targetRoot);
-  const html = targetRoot instanceof Element ? targetRoot.outerHTML : targetRoot.body?.outerHTML || "";
+// src/consistency/snapshot.ts
+var DATA_ELEMENTS_ATTR = "data-elements";
+var SKIP_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "SVG", "NOSCRIPT", "TEMPLATE"]);
+var CONTEXT_ELEMENTS = /* @__PURE__ */ new Set([
+  "HEADER",
+  "NAV",
+  "MAIN",
+  "FOOTER",
+  "SECTION",
+  "ARTICLE",
+  "ASIDE"
+]);
+var CLASS_PATTERNS = {
+  button: /\b(btn|button)\b/i,
+  card: /\b(card)\b/i,
+  input: /\b(input|field|form-control)\b/i,
+  link: /\b(link)\b/i
+};
+var elementCounter = 0;
+function cleanupDataElements() {
+  const elements = document.querySelectorAll(`[${DATA_ELEMENTS_ATTR}]`);
+  elements.forEach((el) => el.removeAttribute(DATA_ELEMENTS_ATTR));
+  elementCounter = 0;
+}
+function generateElementId() {
+  return `el-${++elementCounter}`;
+}
+function truncateText(text, maxLen = 50) {
+  const cleaned = text.trim().replace(/\s+/g, " ");
+  if (cleaned.length <= maxLen) return cleaned;
+  return cleaned.slice(0, maxLen - 3) + "...";
+}
+function inferRole(el, styles) {
+  const ariaRole = el.getAttribute("role");
+  if (ariaRole) {
+    if (ariaRole === "button") return "button";
+    if (ariaRole === "link") return "link";
+    if (ariaRole === "textbox" || ariaRole === "searchbox") return "input";
+    if (ariaRole === "heading") return "heading";
+  }
+  const tag = el.tagName.toUpperCase();
+  if (tag === "BUTTON") return "button";
+  if (tag === "A") return "link";
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return "input";
+  if (/^H[1-6]$/.test(tag)) return "heading";
+  const component = el.getAttribute("data-ui-component");
+  if (component) {
+    const lower = component.toLowerCase();
+    if (lower.includes("button")) return "button";
+    if (lower.includes("card")) return "card";
+    if (lower.includes("input") || lower.includes("field")) return "input";
+    if (lower.includes("link")) return "link";
+  }
+  const className = el.className;
+  if (typeof className === "string") {
+    if (CLASS_PATTERNS.button.test(className)) return "button";
+    if (CLASS_PATTERNS.card.test(className)) return "card";
+    if (CLASS_PATTERNS.input.test(className)) return "input";
+    if (CLASS_PATTERNS.link.test(className)) return "link";
+  }
+  if (isCard(el, styles)) return "card";
+  if (isContainer(styles)) return "container";
+  const text = el.textContent?.trim() || "";
+  if (text.length > 0 && text.length < 200) return "text";
+  return "other";
+}
+function isCard(el, styles) {
+  if (el.children.length === 0) return false;
+  const hasBoxShadow = styles.boxShadow && styles.boxShadow !== "none";
+  const hasBg = styles.backgroundColor && styles.backgroundColor !== "transparent" && styles.backgroundColor !== "rgba(0, 0, 0, 0)";
+  const hasBorder = styles.border && styles.border !== "none" && !styles.border.includes("0px");
+  const hasRadius = styles.borderRadius && styles.borderRadius !== "0px";
+  return Boolean(hasBoxShadow || (hasBg || hasBorder) && hasRadius);
+}
+function isContainer(styles) {
+  const display = styles.display;
+  if (display !== "flex" && display !== "grid") return false;
+  const gap = styles.gap;
+  if (gap && gap !== "normal" && gap !== "0px") return true;
+  const padding = styles.padding;
+  if (padding && padding !== "0px") {
+    const match = padding.match(/(\d+)px/);
+    if (match && parseInt(match[1], 10) > 8) return true;
+  }
+  return false;
+}
+function buildContext(el) {
+  const parts = [];
+  let current = el.parentElement;
+  while (current && parts.length < 3) {
+    const tag = current.tagName.toUpperCase();
+    if (CONTEXT_ELEMENTS.has(tag)) {
+      parts.unshift(tag.toLowerCase());
+    }
+    current = current.parentElement;
+  }
+  return parts.join(" > ") || "root";
+}
+function extractStyles(styles) {
   return {
-    html: truncateHTML(html, 5e4),
-    styles,
-    elementCount: targetRoot.querySelectorAll("*").length,
-    timestamp: Date.now()
+    fontSize: styles.fontSize || void 0,
+    fontWeight: styles.fontWeight || void 0,
+    color: styles.color || void 0,
+    backgroundColor: styles.backgroundColor === "rgba(0, 0, 0, 0)" ? void 0 : styles.backgroundColor || void 0,
+    padding: styles.padding === "0px" ? void 0 : styles.padding || void 0,
+    borderRadius: styles.borderRadius === "0px" ? void 0 : styles.borderRadius || void 0,
+    border: styles.border === "none" || styles.border?.includes("0px") ? void 0 : styles.border || void 0,
+    boxShadow: styles.boxShadow === "none" ? void 0 : styles.boxShadow || void 0,
+    gap: styles.gap === "normal" || styles.gap === "0px" ? void 0 : styles.gap || void 0
+  };
+}
+function shouldSkip(el) {
+  if (SKIP_TAGS.has(el.tagName.toUpperCase())) return true;
+  if (el.hasAttribute("data-ui-lint-ignore")) return true;
+  if (el.getAttribute("aria-hidden") === "true") return true;
+  const styles = window.getComputedStyle(el);
+  if (styles.display === "none" || styles.visibility === "hidden") return true;
+  return false;
+}
+function snapshotElement(el) {
+  if (shouldSkip(el)) return null;
+  const styles = window.getComputedStyle(el);
+  const role = inferRole(el, styles);
+  if (role === "other") return null;
+  const id = generateElementId();
+  el.setAttribute(DATA_ELEMENTS_ATTR, id);
+  const rect = el.getBoundingClientRect();
+  const text = el.textContent?.trim().slice(0, 100) || el.getAttribute("aria-label") || "";
+  return {
+    id,
+    tag: el.tagName.toLowerCase(),
+    role,
+    text: truncateText(text),
+    component: el.getAttribute("data-ui-component") || void 0,
+    context: buildContext(el),
+    styles: extractStyles(styles),
+    rect: {
+      width: Math.round(rect.width),
+      height: Math.round(rect.height)
+    }
   };
 }
+function createSnapshot(root) {
+  cleanupDataElements();
+  const targetRoot = root || document.body;
+  const snapshot = {
+    buttons: [],
+    headings: [],
+    cards: [],
+    links: [],
+    inputs: [],
+    containers: []
+  };
+  const walker = document.createTreeWalker(
+    targetRoot,
+    NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: (node2) => {
+        const el = node2;
+        if (shouldSkip(el)) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  );
+  let node = walker.currentNode;
+  while (node) {
+    if (node instanceof Element) {
+      const elementSnapshot = snapshotElement(node);
+      if (elementSnapshot) {
+        switch (elementSnapshot.role) {
+          case "button":
+            snapshot.buttons.push(elementSnapshot);
+            break;
+          case "heading":
+            snapshot.headings.push(elementSnapshot);
+            break;
+          case "card":
+            snapshot.cards.push(elementSnapshot);
+            break;
+          case "link":
+            snapshot.links.push(elementSnapshot);
+            break;
+          case "input":
+            snapshot.inputs.push(elementSnapshot);
+            break;
+          case "container":
+            snapshot.containers.push(elementSnapshot);
+            break;
+        }
+      }
+    }
+    node = walker.nextNode();
+  }
+  return snapshot;
+}
+function getElementBySnapshotId(id) {
+  return document.querySelector(`[${DATA_ELEMENTS_ATTR}="${id}"]`);
+}
 
 // src/scanner/environment.ts
 function isBrowser() {
@@ -42,89 +222,38 @@ function isNode() {
   return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
 }
 
-// src/analyzer/llm-client.ts
-import {
-  createStyleSummary as createStyleSummary2,
-  buildAnalysisPrompt,
-  buildStyleGuidePrompt,
-  UILINT_DEFAULT_OLLAMA_MODEL
-} from "uilint-core";
-var DEFAULT_API_ENDPOINT = "/api/uilint/analyze";
-var LLMClient = class {
-  apiEndpoint;
-  model;
-  constructor(options = {}) {
-    this.apiEndpoint = options.apiEndpoint || DEFAULT_API_ENDPOINT;
-    this.model = options.model || UILINT_DEFAULT_OLLAMA_MODEL;
-  }
-  /**
-   * Analyzes extracted styles and returns issues
-   */
-  async analyze(styles, styleGuide) {
-    const startTime = Date.now();
-    const styleSummary = createStyleSummary2(styles);
-    try {
-      const response = await fetch(this.apiEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          styleSummary,
-          styleGuide,
-          model: this.model
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-      const data = await response.json();
-      return {
-        issues: data.issues || [],
-        suggestedStyleGuide: data.suggestedStyleGuide,
-        analysisTime: Date.now() - startTime
-      };
-    } catch (error) {
-      console.error("[UILint] Analysis failed:", error);
-      return {
-        issues: [],
-        analysisTime: Date.now() - startTime
-      };
-    }
-  }
-  /**
-   * Generates a style guide from detected styles
-   */
-  async generateStyleGuide(styles) {
-    const styleSummary = createStyleSummary2(styles);
-    try {
-      const response = await fetch(this.apiEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          styleSummary,
-          generateGuide: true,
-          model: this.model
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-      const data = await response.json();
-      return data.styleGuide || null;
-    } catch (error) {
-      console.error("[UILint] Style guide generation failed:", error);
-      return null;
-    }
-  }
-};
-
 // src/components/Overlay.tsx
 import { useState as useState2 } from "react";
 
-// src/components/IssueList.tsx
+// src/components/ViolationList.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function IssueList() {
-  const { issues, highlightedIssue, setHighlightedIssue } = useUILint();
-  if (issues.length === 0) {
+function ViolationList() {
+  const {
+    violations,
+    selectedViolation,
+    setSelectedViolation,
+    lockedViolation,
+    setLockedViolation,
+    isScanning
+  } = useUILint();
+  if (isScanning) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "32px 16px",
+          textAlign: "center",
+          color: "#9CA3AF"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "\u{1F50D}" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px" }, children: "Analyzing page..." }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", marginTop: "4px", color: "#6B7280" }, children: "This may take a moment" })
+        ]
+      }
+    );
+  }
+  if (violations.length === 0) {
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -135,63 +264,124 @@ function IssueList() {
         },
         children: [
           /* @__PURE__ */ jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "\u2728" }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px" }, children: "No issues found" }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px" }, children: "No consistency issues found" }),
           /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", marginTop: "4px" }, children: 'Click "Scan" to analyze the page' })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { style: { padding: "8px" }, children: issues.map((issue) => /* @__PURE__ */ jsx(
-    IssueCard,
+  const handleClick = (violation) => {
+    if (lockedViolation?.elementIds.join(",") === violation.elementIds.join(",")) {
+      setLockedViolation(null);
+    } else {
+      setLockedViolation(violation);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { style: { padding: "8px" }, children: violations.map((violation, index) => /* @__PURE__ */ jsx(
+    ViolationCard,
     {
-      issue,
-      isHighlighted: highlightedIssue?.id === issue.id,
-      onHover: () => setHighlightedIssue(issue),
-      onLeave: () => setHighlightedIssue(null)
+      violation,
+      isSelected: selectedViolation?.elementIds.join(",") === violation.elementIds.join(","),
+      isLocked: lockedViolation?.elementIds.join(",") === violation.elementIds.join(","),
+      onHover: () => setSelectedViolation(violation),
+      onLeave: () => setSelectedViolation(null),
+      onClick: () => handleClick(violation)
     },
-    issue.id
+    `${violation.elementIds.join("-")}-${index}`
   )) });
 }
-function IssueCard({ issue, isHighlighted, onHover, onLeave }) {
-  const typeColors = {
+function ViolationCard({
+  violation,
+  isSelected,
+  isLocked,
+  onHover,
+  onLeave,
+  onClick
+}) {
+  const categoryColors = {
+    spacing: "#10B981",
     color: "#F59E0B",
     typography: "#8B5CF6",
-    spacing: "#10B981",
-    component: "#3B82F6",
-    responsive: "#EC4899",
-    accessibility: "#EF4444"
+    sizing: "#3B82F6",
+    borders: "#06B6D4",
+    shadows: "#6B7280"
+  };
+  const severityIcons = {
+    error: "\u2716",
+    warning: "\u26A0",
+    info: "\u2139"
   };
-  const typeColor = typeColors[issue.type] || "#6B7280";
+  const categoryColor = categoryColors[violation.category] || "#6B7280";
+  const severityIcon = severityIcons[violation.severity] || "\u2022";
+  const isHighlighted = isSelected || isLocked;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: onHover,
       onMouseLeave: onLeave,
+      onClick,
       style: {
         padding: "12px",
         marginBottom: "8px",
         backgroundColor: isHighlighted ? "#374151" : "#111827",
         borderRadius: "8px",
-        border: isHighlighted ? "1px solid #4B5563" : "1px solid transparent",
+        border: isLocked ? "1px solid #3B82F6" : isSelected ? "1px solid #4B5563" : "1px solid transparent",
         cursor: "pointer",
         transition: "all 0.15s"
       },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
-              display: "inline-block",
-              padding: "2px 8px",
-              borderRadius: "4px",
-              backgroundColor: `${typeColor}20`,
-              color: typeColor,
-              fontSize: "11px",
-              fontWeight: "600",
-              textTransform: "uppercase",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
               marginBottom: "8px"
             },
-            children: issue.type
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "inline-block",
+                    padding: "2px 8px",
+                    borderRadius: "4px",
+                    backgroundColor: `${categoryColor}20`,
+                    color: categoryColor,
+                    fontSize: "11px",
+                    fontWeight: "600",
+                    textTransform: "uppercase"
+                  },
+                  children: violation.category
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "12px",
+                    color: violation.severity === "error" ? "#EF4444" : violation.severity === "warning" ? "#F59E0B" : "#9CA3AF"
+                  },
+                  children: severityIcon
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "#6B7280",
+                    marginLeft: "auto"
+                  },
+                  children: [
+                    violation.elementIds.length,
+                    " element",
+                    violation.elementIds.length !== 1 ? "s" : ""
+                  ]
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -203,21 +393,19 @@ function IssueCard({ issue, isHighlighted, onHover, onLeave }) {
               lineHeight: "1.4",
               marginBottom: "8px"
             },
-            children: issue.message
+            children: violation.message
           }
         ),
-        (issue.currentValue || issue.expectedValue) && /* @__PURE__ */ jsxs(
+        violation.details && /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
-              display: "flex",
-              gap: "12px",
               fontSize: "12px",
               color: "#9CA3AF"
             },
             children: [
-              issue.currentValue && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: "#6B7280" }, children: "Current: " }),
+              violation.details.property && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "#6B7280" }, children: "Property: " }),
                 /* @__PURE__ */ jsx(
                   "code",
                   {
@@ -227,29 +415,32 @@ function IssueCard({ issue, isHighlighted, onHover, onLeave }) {
                       borderRadius: "3px",
                       fontSize: "11px"
                     },
-                    children: issue.currentValue
+                    children: violation.details.property
                   }
                 )
               ] }),
-              issue.expectedValue && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: "#6B7280" }, children: "Expected: " }),
-                /* @__PURE__ */ jsx(
-                  "code",
-                  {
-                    style: {
-                      padding: "2px 4px",
-                      backgroundColor: "#374151",
-                      borderRadius: "3px",
-                      fontSize: "11px"
-                    },
-                    children: issue.expectedValue
-                  }
-                )
+              violation.details.values.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "#6B7280" }, children: "Values: " }),
+                violation.details.values.map((val, i) => /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx(
+                    "code",
+                    {
+                      style: {
+                        padding: "2px 4px",
+                        backgroundColor: "#374151",
+                        borderRadius: "3px",
+                        fontSize: "11px"
+                      },
+                      children: val
+                    }
+                  ),
+                  i < violation.details.values.length - 1 && /* @__PURE__ */ jsx("span", { style: { margin: "0 4px", color: "#6B7280" }, children: "vs" })
+                ] }, i))
               ] })
             ]
           }
         ),
-        issue.suggestion && /* @__PURE__ */ jsxs(
+        violation.details.suggestion && /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -262,9 +453,20 @@ function IssueCard({ issue, isHighlighted, onHover, onLeave }) {
             },
             children: [
               "\u{1F4A1} ",
-              issue.suggestion
+              violation.details.suggestion
             ]
           }
+        ),
+        isLocked && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              fontSize: "11px",
+              color: "#3B82F6"
+            },
+            children: "\u{1F512} Click to unlock"
+          }
         )
       ]
     }
@@ -668,36 +870,37 @@ function escapeRegExp(s) {
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Overlay({ position }) {
   const [isExpanded, setIsExpanded] = useState2(false);
-  const { issues, isScanning, scan } = useUILint();
+  const { violations, isScanning, scan, elementCount } = useUILint();
   const positionStyles = {
     position: "fixed",
     zIndex: 99999,
     ...position.includes("bottom") ? { bottom: "16px" } : { top: "16px" },
     ...position.includes("left") ? { left: "16px" } : { right: "16px" }
   };
-  const issueCount = issues.length;
-  const hasIssues = issueCount > 0;
+  const violationCount = violations.length;
+  const hasViolations = violationCount > 0;
   return /* @__PURE__ */ jsx3("div", { style: positionStyles, children: isExpanded ? /* @__PURE__ */ jsx3(
     ExpandedPanel,
     {
       onCollapse: () => setIsExpanded(false),
       onScan: scan,
-      isScanning
+      isScanning,
+      elementCount
     }
   ) : /* @__PURE__ */ jsx3(
     CollapsedButton,
     {
       onClick: () => setIsExpanded(true),
-      issueCount,
-      hasIssues,
+      violationCount,
+      hasViolations,
       isScanning
     }
   ) });
 }
 function CollapsedButton({
   onClick,
-  issueCount,
-  hasIssues,
+  violationCount,
+  hasViolations,
   isScanning
 }) {
   return /* @__PURE__ */ jsx3(
@@ -712,7 +915,7 @@ function CollapsedButton({
         height: "48px",
         borderRadius: "50%",
         border: "none",
-        backgroundColor: hasIssues ? "#EF4444" : "#10B981",
+        backgroundColor: isScanning ? "#3B82F6" : hasViolations ? "#EF4444" : "#10B981",
         color: "white",
         cursor: "pointer",
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
@@ -728,13 +931,55 @@ function CollapsedButton({
         e.currentTarget.style.transform = "scale(1)";
         e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
       },
-      title: `UILint: ${issueCount} issues found`,
-      children: isScanning ? /* @__PURE__ */ jsx3("span", { style: { animation: "spin 1s linear infinite" }, children: "\u27F3" }) : hasIssues ? issueCount : "\u2713"
+      title: isScanning ? "Analyzing..." : `UILint: ${violationCount} issue${violationCount !== 1 ? "s" : ""} found`,
+      children: isScanning ? /* @__PURE__ */ jsx3(SpinnerIcon, {}) : hasViolations ? violationCount : "\u2713"
     }
   );
 }
-function ExpandedPanel({ onCollapse, onScan, isScanning }) {
-  const [activeTab, setActiveTab] = useState2("issues");
+function SpinnerIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style: {
+        animation: "uilint-spin 1s linear infinite"
+      },
+      children: [
+        /* @__PURE__ */ jsx3("style", { children: `
+        @keyframes uilint-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeDasharray: "31.4 31.4",
+            fill: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+function ExpandedPanel({
+  onCollapse,
+  onScan,
+  isScanning,
+  elementCount
+}) {
+  const [activeTab, setActiveTab] = useState2(
+    "violations"
+  );
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -763,10 +1008,25 @@ function ExpandedPanel({ onCollapse, onScan, isScanning }) {
             children: [
               /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
                 /* @__PURE__ */ jsx3("span", { style: { fontSize: "16px" }, children: "\u{1F3A8}" }),
-                /* @__PURE__ */ jsx3("span", { style: { fontWeight: "600", fontSize: "14px" }, children: "UILint" })
+                /* @__PURE__ */ jsx3("span", { style: { fontWeight: "600", fontSize: "14px" }, children: "UILint" }),
+                elementCount > 0 && !isScanning && /* @__PURE__ */ jsxs3(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      color: "#6B7280",
+                      marginLeft: "4px"
+                    },
+                    children: [
+                      "(",
+                      elementCount,
+                      " elements)"
+                    ]
+                  }
+                )
               ] }),
               /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsxs3(
                   "button",
                   {
                     onClick: onScan,
@@ -780,9 +1040,39 @@ function ExpandedPanel({ onCollapse, onScan, isScanning }) {
                       fontSize: "12px",
                       fontWeight: "500",
                       cursor: isScanning ? "not-allowed" : "pointer",
-                      opacity: isScanning ? 0.7 : 1
+                      opacity: isScanning ? 0.7 : 1,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px"
                     },
-                    children: isScanning ? "Scanning..." : "Scan"
+                    children: [
+                      isScanning && /* @__PURE__ */ jsx3(
+                        "svg",
+                        {
+                          width: "12",
+                          height: "12",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          style: {
+                            animation: "uilint-spin 1s linear infinite"
+                          },
+                          children: /* @__PURE__ */ jsx3(
+                            "circle",
+                            {
+                              cx: "12",
+                              cy: "12",
+                              r: "10",
+                              stroke: "currentColor",
+                              strokeWidth: "3",
+                              strokeLinecap: "round",
+                              strokeDasharray: "31.4 31.4",
+                              fill: "none"
+                            }
+                          )
+                        }
+                      ),
+                      isScanning ? "Analyzing..." : "Scan"
+                    ]
                   }
                 ),
                 /* @__PURE__ */ jsx3(
@@ -816,9 +1106,9 @@ function ExpandedPanel({ onCollapse, onScan, isScanning }) {
               /* @__PURE__ */ jsx3(
                 TabButton,
                 {
-                  active: activeTab === "issues",
-                  onClick: () => setActiveTab("issues"),
-                  children: "Issues"
+                  active: activeTab === "violations",
+                  onClick: () => setActiveTab("violations"),
+                  children: "Violations"
                 }
               ),
               /* @__PURE__ */ jsx3(
@@ -832,7 +1122,7 @@ function ExpandedPanel({ onCollapse, onScan, isScanning }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx3("div", { style: { maxHeight: "380px", overflow: "auto" }, children: activeTab === "issues" ? /* @__PURE__ */ jsx3(IssueList, {}) : /* @__PURE__ */ jsx3(QuestionPanel, {}) })
+        /* @__PURE__ */ jsx3("div", { style: { maxHeight: "380px", overflow: "auto" }, children: activeTab === "violations" ? /* @__PURE__ */ jsx3(ViolationList, {}) : /* @__PURE__ */ jsx3(QuestionPanel, {}) })
       ]
     }
   );
@@ -859,89 +1149,179 @@ function TabButton({ active, onClick, children }) {
   );
 }
 
-// src/components/Highlighter.tsx
-import { useEffect, useState as useState3 } from "react";
+// src/consistency/highlights.tsx
+import { useEffect, useState as useState3, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function Highlighter() {
-  const { highlightedIssue } = useUILint();
-  const [rect, setRect] = useState3(null);
-  useEffect(() => {
-    if (!highlightedIssue?.selector) {
-      setRect(null);
-      return;
-    }
-    try {
-      const element = document.querySelector(highlightedIssue.selector);
-      if (element) {
-        const domRect = element.getBoundingClientRect();
-        setRect({
-          top: domRect.top + window.scrollY,
-          left: domRect.left + window.scrollX,
-          width: domRect.width,
-          height: domRect.height
-        });
-      } else {
-        setRect(null);
+var HIGHLIGHT_COLOR = "#3b82f6";
+var DOT_SIZE = 8;
+var BORDER_WIDTH = 2;
+function calculateHighlights(elementIds, withBadges = false) {
+  const highlights = [];
+  elementIds.forEach((id, index) => {
+    const el = getElementBySnapshotId(id);
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    highlights.push({
+      id,
+      rect: {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      },
+      badgeNumber: withBadges && elementIds.length > 1 ? index + 1 : void 0
+    });
+  });
+  return highlights;
+}
+function getAllViolatingIds(violations) {
+  const ids = /* @__PURE__ */ new Set();
+  violations.forEach((v) => {
+    v.elementIds.forEach((id) => ids.add(id));
+  });
+  return ids;
+}
+function OverviewDot({ rect }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: rect.top - DOT_SIZE / 2,
+        left: rect.left + rect.width - DOT_SIZE / 2,
+        width: DOT_SIZE,
+        height: DOT_SIZE,
+        borderRadius: "50%",
+        backgroundColor: HIGHLIGHT_COLOR,
+        pointerEvents: "none",
+        zIndex: 99997,
+        boxShadow: "0 0 4px rgba(59, 130, 246, 0.5)"
       }
-    } catch {
-      setRect(null);
     }
-  }, [highlightedIssue]);
-  if (!rect) return null;
-  const typeColors = {
-    color: "#F59E0B",
-    typography: "#8B5CF6",
-    spacing: "#10B981",
-    component: "#3B82F6",
-    responsive: "#EC4899",
-    accessibility: "#EF4444"
-  };
-  const color = highlightedIssue?.type ? typeColors[highlightedIssue.type] || "#EF4444" : "#EF4444";
+  );
+}
+function HighlightRect({
+  rect,
+  badgeNumber
+}) {
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
-          position: "absolute",
-          top: rect.top - 4,
-          left: rect.left - 4,
-          width: rect.width + 8,
-          height: rect.height + 8,
-          border: `2px solid ${color}`,
-          borderRadius: "4px",
-          backgroundColor: `${color}15`,
+          position: "fixed",
+          top: rect.top - BORDER_WIDTH,
+          left: rect.left - BORDER_WIDTH,
+          width: rect.width + BORDER_WIDTH * 2,
+          height: rect.height + BORDER_WIDTH * 2,
+          border: `${BORDER_WIDTH}px solid ${HIGHLIGHT_COLOR}`,
+          borderRadius: 4,
+          backgroundColor: `${HIGHLIGHT_COLOR}10`,
           pointerEvents: "none",
           zIndex: 99998,
-          boxShadow: `0 0 0 4px ${color}30`,
-          transition: "all 0.2s ease-out"
+          transition: "all 0.15s ease-out"
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    badgeNumber !== void 0 && /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
-          position: "absolute",
-          top: rect.top - 28,
+          position: "fixed",
+          top: rect.top - 12,
           left: rect.left - 4,
-          padding: "4px 8px",
-          backgroundColor: color,
+          minWidth: 20,
+          height: 20,
+          borderRadius: 10,
+          backgroundColor: HIGHLIGHT_COLOR,
           color: "white",
-          fontSize: "11px",
-          fontWeight: "600",
-          borderRadius: "4px 4px 0 0",
+          fontSize: 11,
+          fontWeight: 600,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0 6px",
           pointerEvents: "none",
-          zIndex: 99998,
-          fontFamily: "system-ui, -apple-system, sans-serif",
-          textTransform: "uppercase"
+          zIndex: 99999,
+          fontFamily: "system-ui, -apple-system, sans-serif"
         },
-        children: highlightedIssue?.type || "Issue"
+        children: badgeNumber
       }
     )
   ] });
 }
+function ConsistencyHighlighter({
+  violations,
+  selectedViolation,
+  lockedViolation
+}) {
+  const [overviewHighlights, setOverviewHighlights] = useState3([]);
+  const [activeHighlights, setActiveHighlights] = useState3(
+    []
+  );
+  const [mounted, setMounted] = useState3(false);
+  const activeViolation = lockedViolation || selectedViolation;
+  const updateOverviewHighlights = useCallback(() => {
+    if (activeViolation) {
+      setOverviewHighlights([]);
+      return;
+    }
+    const allIds = getAllViolatingIds(violations);
+    const highlights = [];
+    allIds.forEach((id) => {
+      const el = getElementBySnapshotId(id);
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      highlights.push({
+        id,
+        rect: {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        }
+      });
+    });
+    setOverviewHighlights(highlights);
+  }, [violations, activeViolation]);
+  const updateActiveHighlights = useCallback(() => {
+    if (!activeViolation) {
+      setActiveHighlights([]);
+      return;
+    }
+    const highlights = calculateHighlights(activeViolation.elementIds, true);
+    setActiveHighlights(highlights);
+  }, [activeViolation]);
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  useEffect(() => {
+    updateOverviewHighlights();
+    updateActiveHighlights();
+    const handleUpdate = () => {
+      updateOverviewHighlights();
+      updateActiveHighlights();
+    };
+    window.addEventListener("scroll", handleUpdate, true);
+    window.addEventListener("resize", handleUpdate);
+    return () => {
+      window.removeEventListener("scroll", handleUpdate, true);
+      window.removeEventListener("resize", handleUpdate);
+    };
+  }, [updateOverviewHighlights, updateActiveHighlights]);
+  if (!mounted) return null;
+  if (violations.length === 0) return null;
+  const content = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    !activeViolation && overviewHighlights.map((h) => /* @__PURE__ */ jsx4(OverviewDot, { rect: h.rect }, h.id)),
+    activeViolation && activeHighlights.map((h) => /* @__PURE__ */ jsx4(HighlightRect, { rect: h.rect, badgeNumber: h.badgeNumber }, h.id))
+  ] });
+  return createPortal(content, document.body);
+}
 
 // src/components/UILint.tsx
+import { countElements } from "uilint-core";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var UILintContext = createContext(null);
 function useUILint() {
@@ -956,117 +1336,234 @@ function UILint({
   enabled = true,
   position = "bottom-left",
   autoScan = false,
-  apiEndpoint
+  apiEndpoint = "/api/uilint/consistency"
 }) {
-  const [issues, setIssues] = useState4([]);
+  const [violations, setViolations] = useState4([]);
   const [isScanning, setIsScanning] = useState4(false);
-  const [styleGuideExists, setStyleGuideExists] = useState4(false);
-  const [styleGuideContent, setStyleGuideContent] = useState4(
+  const [elementCount, setElementCount] = useState4(0);
+  const [selectedViolation, setSelectedViolation] = useState4(
     null
   );
-  const [highlightedIssue, setHighlightedIssue] = useState4(
+  const [lockedViolation, setLockedViolation] = useState4(
     null
   );
   const [isMounted, setIsMounted] = useState4(false);
-  const llmClient = useRef(new LLMClient({ apiEndpoint }));
   const hasInitialized = useRef(false);
   useEffect2(() => {
     setIsMounted(true);
   }, []);
-  const checkStyleGuide = useCallback(async () => {
-    if (!isBrowser()) return;
-    try {
-      const response = await fetch("/api/uilint/styleguide");
-      const data = await response.json().catch(() => ({}));
-      if (!response.ok) {
-        setStyleGuideExists(false);
-        setStyleGuideContent(null);
-        return;
+  useEffect2(() => {
+    return () => {
+      if (isBrowser()) {
+        cleanupDataElements();
       }
-      setStyleGuideExists(!!data.exists);
-      setStyleGuideContent(data.content ?? null);
-    } catch {
-      setStyleGuideExists(false);
-      setStyleGuideContent(null);
-    }
+    };
   }, []);
-  const scan = useCallback(async () => {
+  const scan = useCallback2(async () => {
     if (!isBrowser()) return;
     setIsScanning(true);
+    setSelectedViolation(null);
+    setLockedViolation(null);
     try {
-      const snapshot = scanDOM(document.body);
-      if (!styleGuideContent) {
+      const snapshot = createSnapshot(document.body);
+      const count = countElements(snapshot);
+      setElementCount(count);
+      const response = await fetch(apiEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ snapshot })
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
         console.error(
-          '[UILint] No style guide found. Create ".uilint/styleguide.md" at your workspace root.'
+          "[UILint] Analysis failed:",
+          errorData.error || response.statusText
         );
-        setIssues([]);
+        setViolations([]);
         return;
       }
-      const result = await llmClient.current.analyze(
-        snapshot.styles,
-        styleGuideContent
-      );
-      setIssues(result.issues);
+      const result = await response.json();
+      setViolations(result.violations);
+      if (result.violations.length === 0) {
+        console.log(`[UILint] No consistency issues found (${count} elements)`);
+      } else {
+        console.log(
+          `[UILint] Found ${result.violations.length} consistency issue(s)`
+        );
+      }
     } catch (error) {
       console.error("[UILint] Scan failed:", error);
+      setViolations([]);
     } finally {
       setIsScanning(false);
     }
-  }, [styleGuideContent]);
-  const clearIssues = useCallback(() => {
-    setIssues([]);
-    setHighlightedIssue(null);
+  }, [apiEndpoint]);
+  const clearViolations = useCallback2(() => {
+    setViolations([]);
+    setSelectedViolation(null);
+    setLockedViolation(null);
+    cleanupDataElements();
+    setElementCount(0);
   }, []);
   useEffect2(() => {
     if (!enabled || hasInitialized.current) return;
     hasInitialized.current = true;
     if (!isBrowser()) return;
-    checkStyleGuide();
     if (autoScan) {
       const timer = setTimeout(scan, 1e3);
       return () => clearTimeout(timer);
     }
-  }, [enabled, autoScan, scan, checkStyleGuide]);
+  }, [enabled, autoScan, scan]);
   const contextValue = {
-    issues,
+    violations,
     isScanning,
-    styleGuideExists,
+    elementCount,
     scan,
-    clearIssues,
-    highlightedIssue,
-    setHighlightedIssue
+    clearViolations,
+    selectedViolation,
+    setSelectedViolation,
+    lockedViolation,
+    setLockedViolation
   };
   const shouldRenderOverlay = enabled && isMounted;
   return /* @__PURE__ */ jsxs5(UILintContext.Provider, { value: contextValue, children: [
     children,
     shouldRenderOverlay && /* @__PURE__ */ jsxs5(Fragment2, { children: [
       /* @__PURE__ */ jsx5(Overlay, { position }),
-      /* @__PURE__ */ jsx5(Highlighter, {})
+      /* @__PURE__ */ jsx5(
+        ConsistencyHighlighter,
+        {
+          violations,
+          selectedViolation,
+          lockedViolation
+        }
+      )
     ] })
   ] });
 }
 
+// src/scanner/dom-scanner.ts
+import {
+  extractStylesFromDOM,
+  createStyleSummary,
+  serializeStyles,
+  truncateHTML
+} from "uilint-core";
+function scanDOM(root) {
+  const targetRoot = root || document.body;
+  const styles = extractStylesFromDOM(targetRoot);
+  const html = targetRoot instanceof Element ? targetRoot.outerHTML : targetRoot.body?.outerHTML || "";
+  return {
+    html: truncateHTML(html, 5e4),
+    styles,
+    elementCount: targetRoot.querySelectorAll("*").length,
+    timestamp: Date.now()
+  };
+}
+
 // src/index.ts
 import {
   extractStylesFromDOM as extractStylesFromDOM2,
   serializeStyles as serializeStyles2,
   createStyleSummary as createStyleSummary3
 } from "uilint-core";
+
+// src/analyzer/llm-client.ts
+import {
+  createStyleSummary as createStyleSummary2,
+  buildAnalysisPrompt,
+  buildStyleGuidePrompt,
+  UILINT_DEFAULT_OLLAMA_MODEL
+} from "uilint-core";
+var DEFAULT_API_ENDPOINT = "/api/uilint/analyze";
+var LLMClient = class {
+  apiEndpoint;
+  model;
+  constructor(options = {}) {
+    this.apiEndpoint = options.apiEndpoint || DEFAULT_API_ENDPOINT;
+    this.model = options.model || UILINT_DEFAULT_OLLAMA_MODEL;
+  }
+  /**
+   * Analyzes extracted styles and returns issues
+   */
+  async analyze(styles, styleGuide) {
+    const startTime = Date.now();
+    const styleSummary = createStyleSummary2(styles);
+    try {
+      const response = await fetch(this.apiEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          styleSummary,
+          styleGuide,
+          model: this.model
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status}`);
+      }
+      const data = await response.json();
+      return {
+        issues: data.issues || [],
+        suggestedStyleGuide: data.suggestedStyleGuide,
+        analysisTime: Date.now() - startTime
+      };
+    } catch (error) {
+      console.error("[UILint] Analysis failed:", error);
+      return {
+        issues: [],
+        analysisTime: Date.now() - startTime
+      };
+    }
+  }
+  /**
+   * Generates a style guide from detected styles
+   */
+  async generateStyleGuide(styles) {
+    const styleSummary = createStyleSummary2(styles);
+    try {
+      const response = await fetch(this.apiEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          styleSummary,
+          generateGuide: true,
+          model: this.model
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status}`);
+      }
+      const data = await response.json();
+      return data.styleGuide || null;
+    } catch (error) {
+      console.error("[UILint] Style guide generation failed:", error);
+      return null;
+    }
+  }
+};
+
+// src/index.ts
 import { parseStyleGuide } from "uilint-core";
 import { generateStyleGuideFromStyles } from "uilint-core";
 import { createEmptyStyleGuide, mergeStyleGuides } from "uilint-core";
 export {
+  ConsistencyHighlighter,
   LLMClient,
   UILint,
+  cleanupDataElements,
   createEmptyStyleGuide,
+  createSnapshot,
   createStyleSummary3 as createStyleSummary,
   extractStylesFromDOM2 as extractStylesFromDOM,
   generateStyleGuideFromStyles as generateStyleGuide,
+  getElementBySnapshotId,
   isBrowser,
   isJSDOM,
   isNode,
   mergeStyleGuides,
   parseStyleGuide,
   scanDOM,
-  serializeStyles2 as serializeStyles
+  serializeStyles2 as serializeStyles,
+  useUILint
 };