uilint-react 0.1.19 → 0.1.21

package/dist/index.js

@@ -1,10 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-OWX36QE3.js";
-import {
-  SourceOverlays
-} from "./chunk-MEP7WO7U.js";
+} from "./chunk-GUF36FGA.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -12,8 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-3TA6OKS6.js";
-import "./chunk-KUFV22FO.js";
+} from "./chunk-CWCKS753.js";
+import {
+  LocatorOverlay
+} from "./chunk-3DNDKMZ4.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,19 +30,8 @@ import {
   isNodeModulesPath,
   scanDOMForSources,
   updateElementRects,
-  useElementScan,
   useUILintContext
-} from "./chunk-7WYVWDRU.js";
-
-// src/components/UILint.tsx
-import {
-  createContext,
-  useContext,
-  useState as useState4,
-  useEffect as useEffect2,
-  useCallback as useCallback2,
-  useRef
-} from "react";
+} from "./chunk-EBU7YY73.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";
@@ -244,950 +232,10 @@ function getElementBySnapshotId(id) {
   return document.querySelector(`[${DATA_ELEMENTS_ATTR}="${id}"]`);
 }
 
-// src/scanner/environment.ts
-function isBrowser() {
-  return typeof window !== "undefined" && typeof window.document !== "undefined";
-}
-function isJSDOM() {
-  if (!isBrowser()) return false;
-  const userAgent = window.navigator?.userAgent || "";
-  return userAgent.includes("jsdom");
-}
-function isNode() {
-  return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
-}
-
-// src/components/Overlay.tsx
-import { useState as useState2 } from "react";
-
-// src/components/ViolationList.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-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",
-      {
-        style: {
-          padding: "32px 16px",
-          textAlign: "center",
-          color: "#9CA3AF"
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "\u2728" }),
-          /* @__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' })
-        ]
-      }
-    );
-  }
-  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,
-    {
-      violation,
-      isSelected: selectedViolation?.elementIds.join(",") === violation.elementIds.join(","),
-      isLocked: lockedViolation?.elementIds.join(",") === violation.elementIds.join(","),
-      onHover: () => setSelectedViolation(violation),
-      onLeave: () => setSelectedViolation(null),
-      onClick: () => handleClick(violation)
-    },
-    `${violation.elementIds.join("-")}-${index}`
-  )) });
-}
-function ViolationCard({
-  violation,
-  isSelected,
-  isLocked,
-  onHover,
-  onLeave,
-  onClick
-}) {
-  const categoryColors = {
-    spacing: "#10B981",
-    color: "#F59E0B",
-    typography: "#8B5CF6",
-    sizing: "#3B82F6",
-    borders: "#06B6D4",
-    shadows: "#6B7280"
-  };
-  const severityIcons = {
-    error: "\u2716",
-    warning: "\u26A0",
-    info: "\u2139"
-  };
-  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: isLocked ? "1px solid #3B82F6" : isSelected ? "1px solid #4B5563" : "1px solid transparent",
-        cursor: "pointer",
-        transition: "all 0.15s"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              marginBottom: "8px"
-            },
-            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(
-          "div",
-          {
-            style: {
-              fontSize: "13px",
-              color: "#F3F4F6",
-              lineHeight: "1.4",
-              marginBottom: "8px"
-            },
-            children: violation.message
-          }
-        ),
-        violation.details && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              fontSize: "12px",
-              color: "#9CA3AF"
-            },
-            children: [
-              violation.details.property && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
-                /* @__PURE__ */ jsx("span", { style: { color: "#6B7280" }, children: "Property: " }),
-                /* @__PURE__ */ jsx(
-                  "code",
-                  {
-                    style: {
-                      padding: "2px 4px",
-                      backgroundColor: "#374151",
-                      borderRadius: "3px",
-                      fontSize: "11px"
-                    },
-                    children: violation.details.property
-                  }
-                )
-              ] }),
-              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))
-              ] })
-            ]
-          }
-        ),
-        violation.details.suggestion && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              marginTop: "8px",
-              padding: "8px",
-              backgroundColor: "#1E3A5F",
-              borderRadius: "4px",
-              fontSize: "12px",
-              color: "#93C5FD"
-            },
-            children: [
-              "\u{1F4A1} ",
-              violation.details.suggestion
-            ]
-          }
-        ),
-        isLocked && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              marginTop: "8px",
-              fontSize: "11px",
-              color: "#3B82F6"
-            },
-            children: "\u{1F512} Click to unlock"
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/QuestionPanel.tsx
-import { useState } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function QuestionPanel() {
-  const { issues } = useUILint();
-  const [answers, setAnswers] = useState({});
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
-  const [isSaving, setIsSaving] = useState(false);
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [saveError, setSaveError] = useState(null);
-  const questions = generateQuestionsFromIssues(issues);
-  if (questions.length === 0) {
-    return /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          padding: "32px 16px",
-          textAlign: "center",
-          color: "#9CA3AF"
-        },
-        children: [
-          /* @__PURE__ */ jsx2("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "\u{1F3AF}" }),
-          /* @__PURE__ */ jsx2("div", { style: { fontSize: "14px" }, children: "No style conflicts to resolve" }),
-          /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", marginTop: "4px" }, children: "Scan the page to detect inconsistencies" })
-        ]
-      }
-    );
-  }
-  const currentQuestion = questions[currentQuestionIndex];
-  const handleAnswer = (value) => {
-    setAnswers((prev) => ({
-      ...prev,
-      [currentQuestion.id]: value
-    }));
-    if (currentQuestionIndex < questions.length - 1) {
-      setCurrentQuestionIndex((prev) => prev + 1);
-    }
-  };
-  const handleSaveToStyleGuide = async () => {
-    console.log("[UILint] Saving preferences:", answers);
-    setIsSaving(true);
-    setSaveSuccess(false);
-    setSaveError(null);
-    try {
-      const getResponse = await fetch("/api/uilint/styleguide");
-      const data = await getResponse.json().catch(() => ({}));
-      if (!getResponse.ok || !data?.exists || !data?.content) {
-        throw new Error(
-          data?.error || 'No style guide found. Create ".uilint/styleguide.md" at your workspace root first.'
-        );
-      }
-      const updatedContent = applyAnswersToStyleGuide(data.content, answers);
-      const postResponse = await fetch("/api/uilint/styleguide", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content: updatedContent })
-      });
-      if (!postResponse.ok) {
-        const err = await postResponse.json().catch(() => ({}));
-        throw new Error(err?.error || "Failed to save style guide");
-      }
-      console.log("[UILint] Style guide saved successfully!");
-      setSaveSuccess(true);
-      setTimeout(() => {
-        setAnswers({});
-        setCurrentQuestionIndex(0);
-        setSaveSuccess(false);
-      }, 1500);
-    } catch (error) {
-      console.error("[UILint] Error saving style guide:", error);
-      setSaveError(error instanceof Error ? error.message : "Save failed");
-    } finally {
-      setIsSaving(false);
-    }
-  };
-  const isComplete = Object.keys(answers).length === questions.length;
-  return /* @__PURE__ */ jsxs2("div", { style: { padding: "16px" }, children: [
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "16px"
-        },
-        children: [
-          /* @__PURE__ */ jsxs2("span", { style: { fontSize: "12px", color: "#9CA3AF" }, children: [
-            "Question ",
-            currentQuestionIndex + 1,
-            " of ",
-            questions.length
-          ] }),
-          /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                width: "100px",
-                height: "4px",
-                backgroundColor: "#374151",
-                borderRadius: "2px",
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    width: `${(currentQuestionIndex + 1) / questions.length * 100}%`,
-                    height: "100%",
-                    backgroundColor: "#3B82F6",
-                    transition: "width 0.3s"
-                  }
-                }
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "16px" }, children: [
-      /* @__PURE__ */ jsx2(
-        "div",
-        {
-          style: {
-            fontSize: "14px",
-            fontWeight: "500",
-            color: "#F3F4F6",
-            marginBottom: "8px"
-          },
-          children: currentQuestion.question
-        }
-      ),
-      currentQuestion.context && /* @__PURE__ */ jsx2(
-        "div",
-        {
-          style: {
-            fontSize: "12px",
-            color: "#9CA3AF",
-            marginBottom: "12px"
-          },
-          children: currentQuestion.context
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: currentQuestion.options.map((option) => /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        onClick: () => handleAnswer(option.value),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          padding: "12px",
-          backgroundColor: answers[currentQuestion.id] === option.value ? "#374151" : "#111827",
-          border: answers[currentQuestion.id] === option.value ? "1px solid #3B82F6" : "1px solid #374151",
-          borderRadius: "8px",
-          color: "#F3F4F6",
-          fontSize: "13px",
-          textAlign: "left",
-          cursor: "pointer",
-          transition: "all 0.15s"
-        },
-        children: [
-          option.preview && /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                width: "32px",
-                height: "32px",
-                borderRadius: "4px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: option.preview
-            }
-          ),
-          /* @__PURE__ */ jsx2("span", { children: option.label })
-        ]
-      },
-      option.value
-    )) }),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "space-between",
-          marginTop: "16px"
-        },
-        children: [
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              onClick: () => setCurrentQuestionIndex((prev) => Math.max(0, prev - 1)),
-              disabled: currentQuestionIndex === 0,
-              style: {
-                padding: "8px 16px",
-                backgroundColor: "transparent",
-                border: "1px solid #374151",
-                borderRadius: "6px",
-                color: currentQuestionIndex === 0 ? "#4B5563" : "#9CA3AF",
-                fontSize: "12px",
-                cursor: currentQuestionIndex === 0 ? "not-allowed" : "pointer"
-              },
-              children: "\u2190 Back"
-            }
-          ),
-          isComplete && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              onClick: handleSaveToStyleGuide,
-              disabled: isSaving,
-              style: {
-                padding: "8px 16px",
-                backgroundColor: saveSuccess ? "#059669" : isSaving ? "#6B7280" : "#10B981",
-                border: "none",
-                borderRadius: "6px",
-                color: "white",
-                fontSize: "12px",
-                fontWeight: "500",
-                cursor: isSaving ? "wait" : "pointer",
-                opacity: isSaving ? 0.8 : 1,
-                transition: "all 0.2s"
-              },
-              children: saveSuccess ? "\u2713 Saved!" : isSaving ? "Saving..." : "Save to Style Guide"
-            }
-          )
-        ]
-      }
-    ),
-    saveError && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          marginTop: "12px",
-          padding: "10px",
-          borderRadius: "8px",
-          backgroundColor: "#7F1D1D",
-          border: "1px solid #EF4444",
-          color: "#FEE2E2",
-          fontSize: "12px",
-          lineHeight: 1.4
-        },
-        children: saveError
-      }
-    )
-  ] });
-}
-function generateQuestionsFromIssues(issues) {
-  const questions = [];
-  const colorIssues = issues.filter((i) => i.type === "color");
-  if (colorIssues.length > 0) {
-    const colors = /* @__PURE__ */ new Set();
-    colorIssues.forEach((issue) => {
-      if (issue.currentValue) colors.add(issue.currentValue);
-      if (issue.expectedValue) colors.add(issue.expectedValue);
-    });
-    if (colors.size >= 2) {
-      const colorArray = Array.from(colors);
-      questions.push({
-        id: "primary-color",
-        question: "Which color should be used as the primary color?",
-        context: "Multiple similar colors were detected. Choose one for consistency.",
-        options: colorArray.slice(0, 4).map((color) => ({
-          value: color,
-          label: color,
-          preview: /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                width: "100%",
-                height: "100%",
-                backgroundColor: color,
-                borderRadius: "4px"
-              }
-            }
-          )
-        }))
-      });
-    }
-  }
-  const spacingIssues = issues.filter((i) => i.type === "spacing");
-  if (spacingIssues.length > 0) {
-    questions.push({
-      id: "spacing-scale",
-      question: "What spacing scale should be used?",
-      context: "Choose a base unit for consistent spacing throughout the UI.",
-      options: [
-        { value: "4", label: "4px base (4, 8, 12, 16, 20, 24...)" },
-        { value: "8", label: "8px base (8, 16, 24, 32, 40...)" },
-        {
-          value: "tailwind",
-          label: "Tailwind scale (4, 8, 12, 16, 20, 24...)"
-        }
-      ]
-    });
-  }
-  const typographyIssues = issues.filter((i) => i.type === "typography");
-  if (typographyIssues.length > 0) {
-    questions.push({
-      id: "font-weights",
-      question: "Which font weights should be used?",
-      context: "Select the weights to use for consistency.",
-      options: [
-        {
-          value: "400-600-700",
-          label: "Regular (400), Semibold (600), Bold (700)"
-        },
-        {
-          value: "400-500-700",
-          label: "Regular (400), Medium (500), Bold (700)"
-        },
-        {
-          value: "300-400-600",
-          label: "Light (300), Regular (400), Semibold (600)"
-        }
-      ]
-    });
-  }
-  return questions;
-}
-function applyAnswersToStyleGuide(existingContent, answers) {
-  let content = existingContent;
-  if (answers["primary-color"]) {
-    content = upsertBulletInSection(
-      content,
-      "Colors",
-      "Primary",
-      answers["primary-color"]
-    );
-  }
-  if (answers["font-weights"]) {
-    const weightMap = {
-      "400-600-700": "400 (Regular), 600 (Semibold), 700 (Bold)",
-      "400-500-700": "400 (Regular), 500 (Medium), 700 (Bold)",
-      "300-400-600": "300 (Light), 400 (Regular), 600 (Semibold)"
-    };
-    const value = weightMap[answers["font-weights"]] || answers["font-weights"];
-    content = upsertBulletInSection(
-      content,
-      "Typography",
-      "Font Weights",
-      value
-    );
-  }
-  if (answers["spacing-scale"]) {
-    const spacingMap = {
-      "4": "4px (4, 8, 12, 16, 20, 24, 32, 40, 48...)",
-      "8": "8px (8, 16, 24, 32, 40, 48, 56, 64...)",
-      tailwind: "Tailwind (4, 8, 12, 16, 20, 24, 32, 40, 48...)"
-    };
-    const value = spacingMap[answers["spacing-scale"]] || answers["spacing-scale"];
-    content = upsertBulletInSection(content, "Spacing", "Base unit", value);
-  }
-  return content;
-}
-function upsertBulletInSection(markdown, sectionName, label, value) {
-  const lines = markdown.split("\n");
-  const sectionStart = lines.findIndex(
-    (line) => line.match(new RegExp(`^##\\s+${sectionName}\\s*$`, "i"))
-  );
-  if (sectionStart === -1) {
-    throw new Error(
-      `Style guide is missing section "## ${sectionName}". Add it to your style guide and try again.`
-    );
-  }
-  let sectionEnd = lines.length;
-  for (let i = sectionStart + 1; i < lines.length; i++) {
-    if (lines[i].startsWith("## ")) {
-      sectionEnd = i;
-      break;
-    }
-  }
-  const bulletRe = new RegExp(
-    `^-\\s+\\*\\*${escapeRegExp(label)}\\*\\*:\\s+.*$`
-  );
-  const newBullet = `- **${label}**: ${value}`;
-  for (let i = sectionStart + 1; i < sectionEnd; i++) {
-    if (bulletRe.test(lines[i])) {
-      lines[i] = newBullet;
-      return lines.join("\n");
-    }
-  }
-  let insertAt = sectionStart + 1;
-  while (insertAt < sectionEnd && lines[insertAt].trim() === "") insertAt++;
-  lines.splice(insertAt, 0, newBullet);
-  return lines.join("\n");
-}
-function escapeRegExp(s) {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-// src/components/Overlay.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function Overlay({ position }) {
-  const [isExpanded, setIsExpanded] = useState2(false);
-  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 violationCount = violations.length;
-  const hasViolations = violationCount > 0;
-  return /* @__PURE__ */ jsx3("div", { style: positionStyles, children: isExpanded ? /* @__PURE__ */ jsx3(
-    ExpandedPanel,
-    {
-      onCollapse: () => setIsExpanded(false),
-      onScan: scan,
-      isScanning,
-      elementCount
-    }
-  ) : /* @__PURE__ */ jsx3(
-    CollapsedButton,
-    {
-      onClick: () => setIsExpanded(true),
-      violationCount,
-      hasViolations,
-      isScanning
-    }
-  ) });
-}
-function CollapsedButton({
-  onClick,
-  violationCount,
-  hasViolations,
-  isScanning
-}) {
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      onClick,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "48px",
-        height: "48px",
-        borderRadius: "50%",
-        border: "none",
-        backgroundColor: isScanning ? "#3B82F6" : hasViolations ? "#EF4444" : "#10B981",
-        color: "white",
-        cursor: "pointer",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-        transition: "transform 0.2s, box-shadow 0.2s",
-        fontSize: "20px",
-        fontWeight: "bold"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.transform = "scale(1.1)";
-        e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.2)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.transform = "scale(1)";
-        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
-      },
-      title: isScanning ? "Analyzing..." : `UILint: ${violationCount} issue${violationCount !== 1 ? "s" : ""} found`,
-      children: isScanning ? /* @__PURE__ */ jsx3(SpinnerIcon, {}) : hasViolations ? violationCount : "\u2713"
-    }
-  );
-}
-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",
-    {
-      style: {
-        width: "380px",
-        maxHeight: "500px",
-        backgroundColor: "#1F2937",
-        borderRadius: "12px",
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
-        overflow: "hidden",
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        color: "#F9FAFB"
-      },
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "12px 16px",
-              borderBottom: "1px solid #374151",
-              backgroundColor: "#111827"
-            },
-            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" }),
-                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__ */ jsxs3(
-                  "button",
-                  {
-                    onClick: onScan,
-                    disabled: isScanning,
-                    style: {
-                      padding: "6px 12px",
-                      borderRadius: "6px",
-                      border: "none",
-                      backgroundColor: "#3B82F6",
-                      color: "white",
-                      fontSize: "12px",
-                      fontWeight: "500",
-                      cursor: isScanning ? "not-allowed" : "pointer",
-                      opacity: isScanning ? 0.7 : 1,
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "6px"
-                    },
-                    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(
-                  "button",
-                  {
-                    onClick: onCollapse,
-                    style: {
-                      padding: "6px 8px",
-                      borderRadius: "6px",
-                      border: "none",
-                      backgroundColor: "transparent",
-                      color: "#9CA3AF",
-                      fontSize: "16px",
-                      cursor: "pointer"
-                    },
-                    children: "\u2715"
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            style: {
-              display: "flex",
-              borderBottom: "1px solid #374151"
-            },
-            children: [
-              /* @__PURE__ */ jsx3(
-                TabButton,
-                {
-                  active: activeTab === "violations",
-                  onClick: () => setActiveTab("violations"),
-                  children: "Violations"
-                }
-              ),
-              /* @__PURE__ */ jsx3(
-                TabButton,
-                {
-                  active: activeTab === "questions",
-                  onClick: () => setActiveTab("questions"),
-                  children: "Questions"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3("div", { style: { maxHeight: "380px", overflow: "auto" }, children: activeTab === "violations" ? /* @__PURE__ */ jsx3(ViolationList, {}) : /* @__PURE__ */ jsx3(QuestionPanel, {}) })
-      ]
-    }
-  );
-}
-function TabButton({ active, onClick, children }) {
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      onClick,
-      style: {
-        flex: 1,
-        padding: "10px 16px",
-        border: "none",
-        backgroundColor: "transparent",
-        color: active ? "#3B82F6" : "#9CA3AF",
-        fontSize: "13px",
-        fontWeight: "500",
-        cursor: "pointer",
-        borderBottom: active ? "2px solid #3B82F6" : "2px solid transparent",
-        marginBottom: "-1px"
-      },
-      children
-    }
-  );
-}
-
 // src/consistency/highlights.tsx
-import { useEffect, useState as useState3, useCallback } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var HIGHLIGHT_COLOR = "#3b82f6";
 var DOT_SIZE = 8;
 var BORDER_WIDTH = 2;
@@ -1218,7 +266,7 @@ function getAllViolatingIds(violations) {
   return ids;
 }
 function OverviewDot({ rect }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -1240,8 +288,8 @@ function HighlightRect({
   rect,
   badgeNumber
 }) {
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -1259,7 +307,7 @@ function HighlightRect({
         }
       }
     ),
-    badgeNumber !== void 0 && /* @__PURE__ */ jsx4(
+    badgeNumber !== void 0 && /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -1291,11 +339,11 @@ function ConsistencyHighlighter({
   selectedViolation,
   lockedViolation
 }) {
-  const [overviewHighlights, setOverviewHighlights] = useState3([]);
-  const [activeHighlights, setActiveHighlights] = useState3(
+  const [overviewHighlights, setOverviewHighlights] = useState([]);
+  const [activeHighlights, setActiveHighlights] = useState(
     []
   );
-  const [mounted, setMounted] = useState3(false);
+  const [mounted, setMounted] = useState(false);
   const activeViolation = lockedViolation || selectedViolation;
   const updateOverviewHighlights = useCallback(() => {
     if (activeViolation) {
@@ -1348,135 +396,13 @@ function ConsistencyHighlighter({
   }, [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))
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !activeViolation && overviewHighlights.map((h) => /* @__PURE__ */ jsx(OverviewDot, { rect: h.rect }, h.id)),
+    activeViolation && activeHighlights.map((h) => /* @__PURE__ */ jsx(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() {
-  const context = useContext(UILintContext);
-  if (!context) {
-    throw new Error("useUILint must be used within a UILint component");
-  }
-  return context;
-}
-function UILint({
-  children,
-  enabled = true,
-  position = "bottom-left",
-  autoScan = false,
-  apiEndpoint = "/api/uilint/consistency"
-}) {
-  const [violations, setViolations] = useState4([]);
-  const [isScanning, setIsScanning] = useState4(false);
-  const [elementCount, setElementCount] = useState4(0);
-  const [selectedViolation, setSelectedViolation] = useState4(
-    null
-  );
-  const [lockedViolation, setLockedViolation] = useState4(
-    null
-  );
-  const [isMounted, setIsMounted] = useState4(false);
-  const hasInitialized = useRef(false);
-  useEffect2(() => {
-    setIsMounted(true);
-  }, []);
-  useEffect2(() => {
-    return () => {
-      if (isBrowser()) {
-        cleanupDataElements();
-      }
-    };
-  }, []);
-  const scan = useCallback2(async () => {
-    if (!isBrowser()) return;
-    setIsScanning(true);
-    setSelectedViolation(null);
-    setLockedViolation(null);
-    try {
-      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] Analysis failed:",
-          errorData.error || response.statusText
-        );
-        setViolations([]);
-        return;
-      }
-      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);
-    }
-  }, [apiEndpoint]);
-  const clearViolations = useCallback2(() => {
-    setViolations([]);
-    setSelectedViolation(null);
-    setLockedViolation(null);
-    cleanupDataElements();
-    setElementCount(0);
-  }, []);
-  useEffect2(() => {
-    if (!enabled || hasInitialized.current) return;
-    hasInitialized.current = true;
-    if (!isBrowser()) return;
-    if (autoScan) {
-      const timer = setTimeout(scan, 1e3);
-      return () => clearTimeout(timer);
-    }
-  }, [enabled, autoScan, scan]);
-  const contextValue = {
-    violations,
-    isScanning,
-    elementCount,
-    scan,
-    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(
-        ConsistencyHighlighter,
-        {
-          violations,
-          selectedViolation,
-          lockedViolation
-        }
-      )
-    ] })
-  ] });
-}
-
 // src/scanner/dom-scanner.ts
 import {
   extractStylesFromDOM,
@@ -1496,6 +422,19 @@ function scanDOM(root) {
   };
 }
 
+// src/scanner/environment.ts
+function isBrowser() {
+  return typeof window !== "undefined" && typeof window.document !== "undefined";
+}
+function isJSDOM() {
+  if (!isBrowser()) return false;
+  const userAgent = window.navigator?.userAgent || "";
+  return userAgent.includes("jsdom");
+}
+function isNode() {
+  return typeof process !== "undefined" && process.versions != null && process.versions.node != null;
+}
+
 // src/index.ts
 import {
   extractStylesFromDOM as extractStylesFromDOM2,
@@ -1510,7 +449,7 @@ import {
   buildStyleGuidePrompt,
   UILINT_DEFAULT_OLLAMA_MODEL
 } from "uilint-core";
-var DEFAULT_API_ENDPOINT = "/api/uilint/analyze";
+var DEFAULT_API_ENDPOINT = "/api/.uilint/analyze";
 var LLMClient = class {
   apiEndpoint;
   model;
@@ -1589,8 +528,7 @@ export {
   FILE_COLORS,
   InspectionPanel,
   LLMClient,
-  SourceOverlays,
-  UILint,
+  LocatorOverlay,
   UILintProvider,
   UILintToolbar,
   buildEditorUrl,
@@ -1624,7 +562,5 @@ export {
   scanDOMForSources,
   serializeStyles2 as serializeStyles,
   updateElementRects,
-  useElementScan,
-  useUILint,
   useUILintContext
 };