uilint-react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { DOMSnapshot, ExtractedStyles, AnalysisResult } from 'uilint-core';
+export { AnalysisResult, DOMSnapshot, ExtractedStyles, SerializedStyles, StyleGuide, UILintIssue, createEmptyStyleGuide, createStyleSummary, extractStylesFromDOM, generateStyleGuideFromStyles as generateStyleGuide, mergeStyleGuides, parseStyleGuide, serializeStyles } from 'uilint-core';
+
+interface UILintProps {
+    children: React.ReactNode;
+    enabled?: boolean;
+    position?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+    autoScan?: boolean;
+    apiEndpoint?: string;
+}
+declare function UILint({ children, enabled, position, autoScan, apiEndpoint, }: UILintProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DOM scanner for browser environment
+ * Re-exports and wraps uilint-core functions for browser use
+ */
+
+/**
+ * Scans the DOM and extracts a snapshot of all styles
+ */
+declare function scanDOM(root?: Element | Document): DOMSnapshot;
+
+/**
+ * Environment detection utilities
+ */
+/**
+ * Checks if we're running in a browser environment
+ */
+declare function isBrowser(): boolean;
+/**
+ * Checks if we're running in a JSDOM environment (tests)
+ */
+declare function isJSDOM(): boolean;
+/**
+ * Checks if we're running in Node.js
+ */
+declare function isNode(): boolean;
+
+/**
+ * LLM client for browser environment
+ * Uses uilint-core for prompts and wraps API calls
+ */
+
+interface LLMClientOptions {
+    apiEndpoint?: string;
+    model?: string;
+}
+/**
+ * Client for communicating with the LLM via API route (browser environment)
+ */
+declare class LLMClient {
+    private apiEndpoint;
+    private model;
+    constructor(options?: LLMClientOptions);
+    /**
+     * Analyzes extracted styles and returns issues
+     */
+    analyze(styles: ExtractedStyles, styleGuide: string | null): Promise<AnalysisResult>;
+    /**
+     * Generates a style guide from detected styles
+     */
+    generateStyleGuide(styles: ExtractedStyles): Promise<string | null>;
+}
+
+export { LLMClient, UILint, type UILintProps, isBrowser, isJSDOM, isNode, scanDOM };

package/dist/index.js

@@ -0,0 +1,1074 @@
+"use client";
+
+// src/components/UILint.tsx
+import {
+  createContext,
+  useContext,
+  useState as useState4,
+  useEffect as useEffect2,
+  useCallback,
+  useRef
+} from "react";
+import { generateStyleGuideFromStyles as generateStyleGuide } from "uilint-core";
+
+// 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/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/analyzer/llm-client.ts
+import {
+  createStyleSummary as createStyleSummary2,
+  buildAnalysisPrompt,
+  buildStyleGuidePrompt
+} from "uilint-core";
+var DEFAULT_API_ENDPOINT = "/api/uilint/analyze";
+var DEFAULT_MODEL = "qwen2.5-coder:7b";
+var LLMClient = class {
+  apiEndpoint;
+  model;
+  constructor(options = {}) {
+    this.apiEndpoint = options.apiEndpoint || DEFAULT_API_ENDPOINT;
+    this.model = options.model || DEFAULT_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
+import { jsx, jsxs } from "react/jsx-runtime";
+function IssueList() {
+  const { issues, highlightedIssue, setHighlightedIssue } = useUILint();
+  if (issues.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 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,
+    {
+      issue,
+      isHighlighted: highlightedIssue?.id === issue.id,
+      onHover: () => setHighlightedIssue(issue),
+      onLeave: () => setHighlightedIssue(null)
+    },
+    issue.id
+  )) });
+}
+function IssueCard({ issue, isHighlighted, onHover, onLeave }) {
+  const typeColors = {
+    color: "#F59E0B",
+    typography: "#8B5CF6",
+    spacing: "#10B981",
+    component: "#3B82F6",
+    responsive: "#EC4899",
+    accessibility: "#EF4444"
+  };
+  const typeColor = typeColors[issue.type] || "#6B7280";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: onHover,
+      onMouseLeave: onLeave,
+      style: {
+        padding: "12px",
+        marginBottom: "8px",
+        backgroundColor: isHighlighted ? "#374151" : "#111827",
+        borderRadius: "8px",
+        border: isHighlighted ? "1px solid #4B5563" : "1px solid transparent",
+        cursor: "pointer",
+        transition: "all 0.15s"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "inline-block",
+              padding: "2px 8px",
+              borderRadius: "4px",
+              backgroundColor: `${typeColor}20`,
+              color: typeColor,
+              fontSize: "11px",
+              fontWeight: "600",
+              textTransform: "uppercase",
+              marginBottom: "8px"
+            },
+            children: issue.type
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: "13px",
+              color: "#F3F4F6",
+              lineHeight: "1.4",
+              marginBottom: "8px"
+            },
+            children: issue.message
+          }
+        ),
+        (issue.currentValue || issue.expectedValue) && /* @__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: " }),
+                /* @__PURE__ */ jsx(
+                  "code",
+                  {
+                    style: {
+                      padding: "2px 4px",
+                      backgroundColor: "#374151",
+                      borderRadius: "3px",
+                      fontSize: "11px"
+                    },
+                    children: issue.currentValue
+                  }
+                )
+              ] }),
+              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
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        issue.suggestion && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "8px",
+              padding: "8px",
+              backgroundColor: "#1E3A5F",
+              borderRadius: "4px",
+              fontSize: "12px",
+              color: "#93C5FD"
+            },
+            children: [
+              "\u{1F4A1} ",
+              issue.suggestion
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// 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 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);
+    try {
+      const getResponse = await fetch("/api/uilint/styleguide");
+      const { exists, content: existingContent } = await getResponse.json();
+      const updatedContent = buildUpdatedStyleGuide(
+        exists ? existingContent : null,
+        answers
+      );
+      const postResponse = await fetch("/api/uilint/styleguide", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: updatedContent })
+      });
+      if (!postResponse.ok) {
+        throw new 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);
+    } 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"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+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 buildUpdatedStyleGuide(existingContent, answers) {
+  const lines = [];
+  lines.push("# UI Style Guide");
+  lines.push("");
+  lines.push(
+    "> Auto-generated by UILint. Edit this file to define your design system."
+  );
+  lines.push("");
+  lines.push("## Colors");
+  lines.push("");
+  if (answers["primary-color"]) {
+    lines.push(`- **Primary**: ${answers["primary-color"]}`);
+  }
+  const existingColors = extractSection(existingContent, "Colors");
+  existingColors.filter((line) => !line.includes("**Primary**")).forEach((line) => lines.push(line));
+  if (!answers["primary-color"] && existingColors.length === 0) {
+    lines.push("- Define your color palette here");
+  }
+  lines.push("");
+  lines.push("## Typography");
+  lines.push("");
+  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)"
+    };
+    lines.push(
+      `- **Font Weights**: ${weightMap[answers["font-weights"]] || answers["font-weights"]}`
+    );
+  }
+  const existingTypography = extractSection(existingContent, "Typography");
+  existingTypography.filter((line) => !line.includes("**Font Weights**")).forEach((line) => lines.push(line));
+  if (!answers["font-weights"] && existingTypography.length === 0) {
+    lines.push("- Define your typography scale here");
+  }
+  lines.push("");
+  lines.push("## Spacing");
+  lines.push("");
+  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...)"
+    };
+    lines.push(
+      `- **Base unit**: ${spacingMap[answers["spacing-scale"]] || answers["spacing-scale"]}`
+    );
+  }
+  const existingSpacing = extractSection(existingContent, "Spacing");
+  existingSpacing.filter((line) => !line.includes("**Base unit**")).forEach((line) => lines.push(line));
+  if (!answers["spacing-scale"] && existingSpacing.length === 0) {
+    lines.push("- Define your spacing scale here");
+  }
+  lines.push("");
+  const otherSections = ["Border Radius", "Components"];
+  otherSections.forEach((section) => {
+    const sectionLines = extractSection(existingContent, section);
+    if (sectionLines.length > 0) {
+      lines.push(`## ${section}`);
+      lines.push("");
+      sectionLines.forEach((line) => lines.push(line));
+      lines.push("");
+    }
+  });
+  if (!existingContent?.includes("## Components")) {
+    lines.push("## Components");
+    lines.push("");
+    lines.push("- **Buttons**: Define button styles here");
+    lines.push("- **Cards**: Define card styles here");
+    lines.push("- **Inputs**: Define input styles here");
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function extractSection(content, sectionName) {
+  if (!content) return [];
+  const lines = content.split("\n");
+  const sectionStart = lines.findIndex(
+    (line) => line.match(new RegExp(`^##\\s+${sectionName}`, "i"))
+  );
+  if (sectionStart === -1) return [];
+  const result = [];
+  for (let i = sectionStart + 1; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("## ")) break;
+    if (result.length === 0 && line.trim() === "") continue;
+    if (line.startsWith("- ")) {
+      result.push(line);
+    }
+  }
+  return result;
+}
+
+// src/components/Overlay.tsx
+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 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;
+  return /* @__PURE__ */ jsx3("div", { style: positionStyles, children: isExpanded ? /* @__PURE__ */ jsx3(
+    ExpandedPanel,
+    {
+      onCollapse: () => setIsExpanded(false),
+      onScan: scan,
+      isScanning
+    }
+  ) : /* @__PURE__ */ jsx3(
+    CollapsedButton,
+    {
+      onClick: () => setIsExpanded(true),
+      issueCount,
+      hasIssues,
+      isScanning
+    }
+  ) });
+}
+function CollapsedButton({ onClick, issueCount, hasIssues, isScanning }) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "48px",
+        height: "48px",
+        borderRadius: "50%",
+        border: "none",
+        backgroundColor: hasIssues ? "#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: `UILint: ${issueCount} issues found`,
+      children: isScanning ? /* @__PURE__ */ jsx3("span", { style: { animation: "spin 1s linear infinite" }, children: "\u27F3" }) : hasIssues ? issueCount : "\u2713"
+    }
+  );
+}
+function ExpandedPanel({ onCollapse, onScan, isScanning }) {
+  const [activeTab, setActiveTab] = useState2("issues");
+  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" })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx3(
+                  "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
+                    },
+                    children: isScanning ? "Scanning..." : "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 === "issues",
+                  onClick: () => setActiveTab("issues"),
+                  children: "Issues"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                TabButton,
+                {
+                  active: activeTab === "questions",
+                  onClick: () => setActiveTab("questions"),
+                  children: "Questions"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { maxHeight: "380px", overflow: "auto" }, children: activeTab === "issues" ? /* @__PURE__ */ jsx3(IssueList, {}) : /* @__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/components/Highlighter.tsx
+import { useEffect, useState as useState3 } from "react";
+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);
+      }
+    } 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";
+  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`,
+          pointerEvents: "none",
+          zIndex: 99998,
+          boxShadow: `0 0 0 4px ${color}30`,
+          transition: "all 0.2s ease-out"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: rect.top - 28,
+          left: rect.left - 4,
+          padding: "4px 8px",
+          backgroundColor: color,
+          color: "white",
+          fontSize: "11px",
+          fontWeight: "600",
+          borderRadius: "4px 4px 0 0",
+          pointerEvents: "none",
+          zIndex: 99998,
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          textTransform: "uppercase"
+        },
+        children: highlightedIssue?.type || "Issue"
+      }
+    )
+  ] });
+}
+
+// src/components/UILint.tsx
+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
+}) {
+  const [issues, setIssues] = useState4([]);
+  const [isScanning, setIsScanning] = useState4(false);
+  const [styleGuideExists, setStyleGuideExists] = useState4(false);
+  const [styleGuideContent, setStyleGuideContent] = useState4(
+    null
+  );
+  const [highlightedIssue, setHighlightedIssue] = 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();
+      setStyleGuideExists(data.exists);
+      setStyleGuideContent(data.content);
+    } catch {
+      setStyleGuideExists(false);
+    }
+  }, []);
+  const saveStyleGuide = useCallback(async (content) => {
+    if (!isBrowser()) return;
+    try {
+      await fetch("/api/uilint/styleguide", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content })
+      });
+      setStyleGuideExists(true);
+      setStyleGuideContent(content);
+    } catch (error) {
+      console.error("[UILint] Failed to save style guide:", error);
+    }
+  }, []);
+  const scan = useCallback(async () => {
+    if (!isBrowser()) return;
+    setIsScanning(true);
+    try {
+      const snapshot = scanDOM(document.body);
+      if (!styleGuideContent) {
+        const generatedGuide = generateStyleGuide(snapshot.styles);
+        await saveStyleGuide(generatedGuide);
+      }
+      const result = await llmClient.current.analyze(
+        snapshot.styles,
+        styleGuideContent
+      );
+      setIssues(result.issues);
+    } catch (error) {
+      console.error("[UILint] Scan failed:", error);
+    } finally {
+      setIsScanning(false);
+    }
+  }, [styleGuideContent, saveStyleGuide]);
+  const clearIssues = useCallback(() => {
+    setIssues([]);
+    setHighlightedIssue(null);
+  }, []);
+  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]);
+  const contextValue = {
+    issues,
+    isScanning,
+    styleGuideExists,
+    scan,
+    clearIssues,
+    highlightedIssue,
+    setHighlightedIssue
+  };
+  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, {})
+    ] })
+  ] });
+}
+
+// src/index.ts
+import {
+  extractStylesFromDOM as extractStylesFromDOM2,
+  serializeStyles as serializeStyles2,
+  createStyleSummary as createStyleSummary3
+} from "uilint-core";
+import { parseStyleGuide } from "uilint-core";
+import { generateStyleGuideFromStyles } from "uilint-core";
+import { createEmptyStyleGuide, mergeStyleGuides } from "uilint-core";
+export {
+  LLMClient,
+  UILint,
+  createEmptyStyleGuide,
+  createStyleSummary3 as createStyleSummary,
+  extractStylesFromDOM2 as extractStylesFromDOM,
+  generateStyleGuideFromStyles as generateStyleGuide,
+  isBrowser,
+  isJSDOM,
+  isNode,
+  mergeStyleGuides,
+  parseStyleGuide,
+  scanDOM,
+  serializeStyles2 as serializeStyles
+};

package/dist/node.d.ts

@@ -0,0 +1,40 @@
+import { AnalysisResult, UILintIssue } from 'uilint-core';
+
+/**
+ * Checks if we're running in a JSDOM environment (tests)
+ */
+declare function isJSDOM(): boolean;
+
+/**
+ * Adapter for running UILint in JSDOM/Node.js test environments
+ * Uses uilint-core for analysis
+ */
+
+/**
+ * Adapter for running UILint in JSDOM/Node.js test environments
+ * Calls Ollama directly and outputs to console.warn()
+ */
+declare class JSDOMAdapter {
+    private styleGuideContent;
+    private styleGuidePath;
+    private client;
+    constructor(styleGuidePath?: string);
+    /**
+     * Loads the style guide from the filesystem (Node.js only)
+     */
+    loadStyleGuide(): Promise<string | null>;
+    /**
+     * Analyzes the current DOM and returns issues
+     */
+    analyze(root?: Element | Document): Promise<AnalysisResult>;
+    /**
+     * Outputs issues to console.warn (for test visibility)
+     */
+    outputWarnings(issues: UILintIssue[]): void;
+}
+/**
+ * Convenience function for running UILint in tests
+ */
+declare function runUILintInTest(root?: Element | Document): Promise<UILintIssue[]>;
+
+export { JSDOMAdapter, isJSDOM, runUILintInTest };

package/dist/node.js

@@ -0,0 +1,111 @@
+// src/scanner/jsdom-adapter.ts
+import {
+  OllamaClient,
+  createStyleSummary as createStyleSummary2
+} from "uilint-core";
+
+// 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/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");
+}
+
+// src/scanner/jsdom-adapter.ts
+var JSDOMAdapter = class {
+  styleGuideContent = null;
+  styleGuidePath;
+  client;
+  constructor(styleGuidePath = ".uilint/styleguide.md") {
+    this.styleGuidePath = styleGuidePath;
+    this.client = new OllamaClient();
+  }
+  /**
+   * Loads the style guide from the filesystem (Node.js only)
+   */
+  async loadStyleGuide() {
+    if (typeof process === "undefined") return null;
+    try {
+      const fs = await import("fs/promises");
+      const path = await import("path");
+      const fullPath = path.resolve(process.cwd(), this.styleGuidePath);
+      this.styleGuideContent = await fs.readFile(fullPath, "utf-8");
+      return this.styleGuideContent;
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Analyzes the current DOM and returns issues
+   */
+  async analyze(root) {
+    const startTime = Date.now();
+    const snapshot = scanDOM(root);
+    const styleSummary = createStyleSummary2(snapshot.styles);
+    if (!this.styleGuideContent) {
+      await this.loadStyleGuide();
+    }
+    const result = await this.client.analyzeStyles(
+      styleSummary,
+      this.styleGuideContent
+    );
+    return {
+      issues: result.issues,
+      analysisTime: Date.now() - startTime
+    };
+  }
+  /**
+   * Outputs issues to console.warn (for test visibility)
+   */
+  outputWarnings(issues) {
+    if (issues.length === 0) {
+      console.warn("[UILint] No UI consistency issues found");
+      return;
+    }
+    issues.forEach((issue) => {
+      const parts = [`\u26A0\uFE0F [UILint] ${issue.message}`];
+      if (issue.currentValue && issue.expectedValue) {
+        parts.push(
+          `Current: ${issue.currentValue}, Expected: ${issue.expectedValue}`
+        );
+      }
+      if (issue.suggestion) {
+        parts.push(`Suggestion: ${issue.suggestion}`);
+      }
+      console.warn(parts.join(" | "));
+    });
+  }
+};
+async function runUILintInTest(root) {
+  const adapter = new JSDOMAdapter();
+  const result = await adapter.analyze(root);
+  adapter.outputWarnings(result.issues);
+  return result.issues;
+}
+export {
+  JSDOMAdapter,
+  isJSDOM,
+  runUILintInTest
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "uilint-react",
+  "version": "0.1.0",
+  "description": "React component for AI-powered UI consistency checking",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./node": {
+      "types": "./dist/node.d.ts",
+      "import": "./dist/node.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "uilint-core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "lint",
+    "consistency",
+    "design-system",
+    "ai",
+    "llm"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/"
+  }
+}