uilint-react 0.2.1 → 0.2.3

package/dist/index.js

@@ -1,484 +1,45 @@
-"use client";
-import {
-  UILintToolbar
-} from "./chunk-KKNPFLL2.js";
-import {
-  InspectionPanel
-} from "./chunk-Z4AAGFIN.js";
-import {
-  clearSourceCache,
-  fetchSource,
-  fetchSourceWithContext,
-  getCachedSource,
-  prefetchSources
-} from "./chunk-S4IWHBOQ.js";
-import {
-  LocatorOverlay
-} from "./chunk-K46BWHFU.js";
-import {
-  DATA_UILINT_ID,
-  DEFAULT_SETTINGS,
-  FILE_COLORS,
-  UILintProvider,
-  buildEditorUrl,
-  cleanupDataAttributes,
-  getDisplayName,
-  getElementById,
-  getSourceFromDataLoc,
-  groupBySourceFile,
-  isNodeModulesPath,
-  scanDOMForSources,
-  updateElementRects,
-  useUILintContext
-} from "./chunk-552GIJIQ.js";
-
-// 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 {
-    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/consistency/highlights.tsx
-import { useEffect, useState, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsx(
-    "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)"
-      }
-    }
-  );
-}
-function HighlightRect({
-  rect,
-  badgeNumber
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          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,
-          transition: "all 0.15s ease-out"
-        }
-      }
-    ),
-    badgeNumber !== void 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          top: rect.top - 12,
-          left: rect.left - 4,
-          minWidth: 20,
-          height: 20,
-          borderRadius: 10,
-          backgroundColor: HIGHLIGHT_COLOR,
-          color: "white",
-          fontSize: 11,
-          fontWeight: 600,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "0 6px",
-          pointerEvents: "none",
-          zIndex: 99999,
-          fontFamily: "system-ui, -apple-system, sans-serif"
-        },
-        children: badgeNumber
-      }
-    )
-  ] });
-}
-function ConsistencyHighlighter({
-  violations,
-  selectedViolation,
-  lockedViolation
-}) {
-  const [overviewHighlights, setOverviewHighlights] = useState([]);
-  const [activeHighlights, setActiveHighlights] = useState(
-    []
-  );
-  const [mounted, setMounted] = useState(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__ */ 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/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/index.ts
-import {
-  extractStylesFromDOM as extractStylesFromDOM2,
-  serializeStyles as serializeStyles2,
-  createStyleSummary as createStyleSummary2
-} from "uilint-core";
-import { parseStyleGuide } from "uilint-core";
-import { generateStyleGuideFromStyles } from "uilint-core";
-import { createEmptyStyleGuide, mergeStyleGuides } from "uilint-core";
+import { C as r, r as o, D as i, F as c, I as l, L as S, U as n, b as u, h as m, d as p, v as y, o as d, t as h, m as D, n as I, p as g, k as L, e as E, w as F, l as f, c as C, i as O, q as U, s as x, f as G, u as T } from "./index-BGzkrD0y.js";
+import "react";
+import "react-dom";
+import { i as M, a as N, b as A, s as B } from "./environment-DVxa60C6.js";
+import { createEmptyStyleGuide as v, createStyleSummary as P, extractStylesFromDOM as w, generateStyleGuideFromStyles as R, mergeStyleGuides as k, parseStyleGuide as q, serializeStyles as z } from "uilint-core";
 export {
-  ConsistencyHighlighter,
-  DATA_UILINT_ID,
-  DEFAULT_SETTINGS,
-  FILE_COLORS,
-  InspectionPanel,
-  LocatorOverlay,
-  UILintProvider,
-  UILintToolbar,
-  buildEditorUrl,
-  cleanupDataAttributes,
-  cleanupDataElements,
-  clearSourceCache,
-  createEmptyStyleGuide,
-  createSnapshot,
-  createStyleSummary2 as createStyleSummary,
-  extractStylesFromDOM2 as extractStylesFromDOM,
-  fetchSource,
-  fetchSourceWithContext,
-  generateStyleGuideFromStyles as generateStyleGuide,
-  getCachedSource,
-  getDisplayName,
-  getElementById,
-  getElementBySnapshotId,
-  getSourceFromDataLoc,
-  groupBySourceFile,
-  isBrowser,
-  isJSDOM,
-  isNode,
-  isNodeModulesPath,
-  mergeStyleGuides,
-  parseStyleGuide,
-  prefetchSources,
-  scanDOM,
-  scanDOMForSources,
-  serializeStyles2 as serializeStyles,
-  updateElementRects,
-  useUILintContext
+  r as ConsistencyHighlighter,
+  o as DATA_UILINT_ID,
+  i as DEFAULT_SETTINGS,
+  c as FILE_COLORS,
+  l as InspectionPanel,
+  S as LocatorOverlay,
+  n as UILintProvider,
+  u as UILintToolbar,
+  m as buildEditorUrl,
+  p as cleanupDataAttributes,
+  y as cleanupDataElements,
+  d as clearSourceCache,
+  v as createEmptyStyleGuide,
+  h as createSnapshot,
+  P as createStyleSummary,
+  w as extractStylesFromDOM,
+  D as fetchSource,
+  I as fetchSourceWithContext,
+  R as generateStyleGuide,
+  g as getCachedSource,
+  L as getDisplayName,
+  E as getElementById,
+  F as getElementBySnapshotId,
+  f as getSourceFromDataLoc,
+  C as groupBySourceFile,
+  M as isBrowser,
+  N as isJSDOM,
+  A as isNode,
+  O as isNodeModulesPath,
+  k as mergeStyleGuides,
+  q as parseStyleGuide,
+  U as prefetchSources,
+  B as scanDOM,
+  x as scanDOMForSources,
+  z as serializeStyles,
+  G as updateElementRects,
+  T as useUILintContext
 };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,11 @@
+import { ClassValue } from 'clsx';
+/**
+ * `cn()` helper used across shadcn/cult components.
+ *
+ * Note: We scope Tailwind utilities to the devtool container via
+ * `tailwind.config.ts` (`important: ".dev-tool-root"`), so we do NOT need a
+ * custom class prefix. Keeping classnames standard also ensures Tailwind JIT
+ * can see them and emit the right utilities into the injected CSS bundle.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;;;;GAOG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/node.d.ts

@@ -1,40 +1,9 @@
-import { AnalysisResult, UILintIssue } from 'uilint-core';
-
 /**
- * Checks if we're running in a JSDOM environment (tests)
+ * Node.js-specific exports for uilint-react
+ *
+ * This entry point includes features that require Node.js APIs (fs, path, etc.)
+ * Use this in Node.js/test environments, not in browser bundles.
  */
-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 };
+export { JSDOMAdapter, runUILintInTest } from './scanner/jsdom-adapter.js';
+export { isJSDOM } from './scanner/environment.js';
+//# sourceMappingURL=node.d.ts.map

package/dist/node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../src/node.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG3E,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC"}