uilint-react 0.1.19 → 0.1.20

package/dist/chunk-PBC3J267.js

@@ -0,0 +1,276 @@
+"use client";
+import {
+  useUILintContext
+} from "./chunk-DAFFOBEU.js";
+
+// src/components/ui-lint/UILintToolbar.tsx
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLES = {
+  bg: "rgba(17, 24, 39, 0.9)",
+  bgHover: "rgba(31, 41, 55, 0.95)",
+  border: "rgba(75, 85, 99, 0.5)",
+  text: "#F9FAFB",
+  textMuted: "#9CA3AF",
+  accent: "#3B82F6",
+  accentHover: "#2563EB",
+  shadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+  blur: "blur(12px)",
+  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
+};
+function UILintToolbar() {
+  const { settings, updateSettings, inspectedElement } = useUILintContext();
+  const [showSettings, setShowSettings] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const settingsRef = useRef(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (settingsRef.current && !settingsRef.current.contains(e.target)) {
+        setShowSettings(false);
+      }
+    };
+    if (showSettings) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showSettings]);
+  if (!mounted) return null;
+  if (inspectedElement) return null;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ui-lint": true,
+      style: {
+        position: "fixed",
+        top: "24px",
+        right: "24px",
+        zIndex: 99999,
+        fontFamily: STYLES.font
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes uilint-fade-in {
+          from { opacity: 0; transform: scale(0.95); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: settingsRef, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setShowSettings(!showSettings),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "48px",
+                height: "48px",
+                borderRadius: "50%",
+                border: `1px solid ${STYLES.border}`,
+                backgroundColor: showSettings ? STYLES.bgHover : STYLES.bg,
+                backdropFilter: STYLES.blur,
+                WebkitBackdropFilter: STYLES.blur,
+                boxShadow: STYLES.shadow,
+                cursor: "pointer",
+                transition: "all 0.2s ease-out",
+                color: showSettings ? STYLES.text : STYLES.textMuted,
+                fontSize: "20px"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.transform = "scale(1.05)";
+                e.currentTarget.style.boxShadow = "0 12px 40px rgba(0, 0, 0, 0.5)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.transform = "scale(1)";
+                e.currentTarget.style.boxShadow = STYLES.shadow;
+              },
+              title: "UILint Settings (Alt+Click any element to inspect)",
+              children: /* @__PURE__ */ jsx(UILintIcon, { active: showSettings })
+            }
+          ),
+          showSettings && /* @__PURE__ */ jsx(SettingsPopover, { settings, onUpdate: updateSettings }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: "100%",
+                top: "50%",
+                transform: "translateY(-50%)",
+                marginLeft: "12px",
+                padding: "8px 12px",
+                borderRadius: "8px",
+                backgroundColor: STYLES.bg,
+                border: `1px solid ${STYLES.border}`,
+                backdropFilter: STYLES.blur,
+                WebkitBackdropFilter: STYLES.blur,
+                boxShadow: STYLES.shadow,
+                fontSize: "12px",
+                color: STYLES.textMuted,
+                whiteSpace: "nowrap",
+                opacity: 0,
+                transition: "opacity 0.2s",
+                pointerEvents: "none"
+              },
+              className: "uilint-hint",
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { color: STYLES.text }, children: "Alt+Click" }),
+                " any element to inspect"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return createPortal(content, document.body);
+}
+function SettingsPopover({
+  settings,
+  onUpdate
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        marginTop: "8px",
+        width: "280px",
+        padding: "16px",
+        borderRadius: "12px",
+        border: `1px solid ${STYLES.border}`,
+        backgroundColor: STYLES.bg,
+        backdropFilter: STYLES.blur,
+        WebkitBackdropFilter: STYLES.blur,
+        boxShadow: STYLES.shadow,
+        animation: "uilint-fade-in 0.15s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: "13px",
+              fontWeight: 600,
+              color: STYLES.text,
+              marginBottom: "12px"
+            },
+            children: "UILint Settings"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingToggle,
+          {
+            label: "Hide node_modules",
+            checked: settings.hideNodeModules,
+            onChange: (checked) => onUpdate({ hideNodeModules: checked })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "12px",
+              paddingTop: "12px",
+              borderTop: `1px solid ${STYLES.border}`,
+              fontSize: "11px",
+              color: STYLES.textMuted,
+              lineHeight: 1.5
+            },
+            children: [
+              /* @__PURE__ */ jsx("strong", { style: { color: STYLES.text }, children: "Alt+Click" }),
+              " any element to open the inspector sidebar"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SettingToggle({
+  label,
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "8px 0",
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: STYLES.textMuted }, children: label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => onChange(!checked),
+            style: {
+              width: "36px",
+              height: "20px",
+              borderRadius: "10px",
+              backgroundColor: checked ? STYLES.accent : "rgba(75, 85, 99, 0.5)",
+              position: "relative",
+              transition: "background-color 0.2s"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "2px",
+                  left: checked ? "18px" : "2px",
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%",
+                  backgroundColor: "#FFFFFF",
+                  transition: "left 0.2s",
+                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function UILintIcon({ active }) {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "3",
+        y: "3",
+        width: "18",
+        height: "18",
+        rx: "3",
+        stroke: active ? STYLES.accent : "currentColor",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7 12h10M12 7v10",
+        stroke: active ? STYLES.accent : "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+
+export {
+  UILintToolbar
+};

package/dist/{chunk-KUFV22FO.js → chunk-VYCIUDU7.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-7WYVWDRU.js";
+} from "./chunk-DAFFOBEU.js";
 
 // src/components/ui-lint/LocatorOverlay.tsx
 import { useState, useEffect, useMemo } from "react";
@@ -207,7 +207,77 @@ function InfoTooltip({
     }
   );
 }
+function InspectedElementHighlight() {
+  const { inspectedElement } = useUILintContext();
+  const [mounted, setMounted] = useState(false);
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!inspectedElement?.element) return;
+    const updateRect = () => {
+      if (inspectedElement.element) {
+        setRect(inspectedElement.element.getBoundingClientRect());
+      }
+    };
+    updateRect();
+    window.addEventListener("scroll", updateRect, true);
+    window.addEventListener("resize", updateRect);
+    return () => {
+      window.removeEventListener("scroll", updateRect, true);
+      window.removeEventListener("resize", updateRect);
+    };
+  }, [inspectedElement?.element]);
+  if (!mounted || !inspectedElement || !rect) return null;
+  const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes uilint-inspected-pulse {
+          0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6), 0 0 8px rgba(16, 185, 129, 0.3); }
+          50% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.8), 0 0 16px rgba(16, 185, 129, 0.5); }
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top - 3,
+          left: rect.left - 3,
+          width: rect.width + 6,
+          height: rect.height + 6,
+          border: "2px solid #10B981",
+          borderRadius: "6px",
+          backgroundColor: "rgba(16, 185, 129, 0.08)",
+          animation: "uilint-inspected-pulse 2s ease-in-out infinite",
+          zIndex: 99996
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top - 24,
+          left: rect.left - 3,
+          padding: "2px 8px",
+          backgroundColor: "#10B981",
+          color: "#FFFFFF",
+          fontSize: "10px",
+          fontWeight: 600,
+          fontFamily: STYLES.font,
+          borderRadius: "4px 4px 0 0",
+          zIndex: 99996
+        },
+        children: "Inspecting"
+      }
+    )
+  ] });
+  return createPortal(content, document.body);
+}
 
 export {
-  LocatorOverlay
+  LocatorOverlay,
+  InspectedElementHighlight
 };

package/dist/index.d.ts

@@ -1,29 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { Violation, GroupedSnapshot, DOMSnapshot, ExtractedStyles, AnalysisResult } from 'uilint-core';
+import { GroupedSnapshot, Violation, DOMSnapshot, ExtractedStyles, AnalysisResult } from 'uilint-core';
 export { AnalysisResult, ConsistencyResult, DOMSnapshot, ElementRole, ElementSnapshot, ExtractedStyles, GroupedSnapshot, SerializedStyles, StyleGuide, StyleSnapshot, UILintIssue, Violation, ViolationCategory, ViolationSeverity, createEmptyStyleGuide, createStyleSummary, extractStylesFromDOM, generateStyleGuideFromStyles as generateStyleGuide, mergeStyleGuides, parseStyleGuide, serializeStyles } from 'uilint-core';
 
-interface UILintProps {
-    children: React$1.ReactNode;
-    enabled?: boolean;
-    position?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
-    autoScan?: boolean;
-    apiEndpoint?: string;
-}
-interface UILintContextValue$1 {
-    violations: Violation[];
-    isScanning: boolean;
-    elementCount: number;
-    scan: () => Promise<void>;
-    clearViolations: () => void;
-    selectedViolation: Violation | null;
-    setSelectedViolation: (violation: Violation | null) => void;
-    lockedViolation: Violation | null;
-    setLockedViolation: (violation: Violation | null) => void;
-}
-declare function useUILint(): UILintContextValue$1;
-declare function UILint({ children, enabled, position, autoScan, apiEndpoint, }: UILintProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Types for UILint Source Visualization
  */
@@ -67,15 +46,8 @@ interface SourceFile {
  * User-configurable settings for the overlay
  */
 interface UILintSettings {
-    showLabels: boolean;
     hideNodeModules: boolean;
-    overlayOpacity: number;
-    labelPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }
-/**
- * Operating modes for the UILint overlay
- */
-type UILintMode = "off" | "sources" | "inspect";
 /**
  * Element detected under the cursor during Alt-key locator mode
  */
@@ -87,22 +59,21 @@ interface LocatorTarget {
     /** Index in the component stack (0 = current element, higher = parent) */
     stackIndex: number;
 }
+/**
+ * Element being inspected in the sidebar
+ */
+interface InspectedElement {
+    element: Element;
+    source: SourceLocation | null;
+    componentStack: ComponentInfo[];
+    rect: DOMRect;
+}
 /**
  * Context value provided by UILintProvider
  */
 interface UILintContextValue {
-    mode: UILintMode;
-    setMode: (mode: UILintMode) => void;
-    scannedElements: ScannedElement[];
-    sourceFiles: SourceFile[];
-    selectedElement: ScannedElement | null;
-    setSelectedElement: (element: ScannedElement | null) => void;
-    hoveredElement: ScannedElement | null;
-    setHoveredElement: (element: ScannedElement | null) => void;
     settings: UILintSettings;
     updateSettings: (settings: Partial<UILintSettings>) => void;
-    rescan: () => void;
-    isScanning: boolean;
     /** True when Alt/Option key is held down */
     altKeyHeld: boolean;
     /** Current element under cursor when Alt is held */
@@ -111,6 +82,10 @@ interface UILintContextValue {
     locatorGoUp: () => void;
     /** Navigate to child component in locator mode */
     locatorGoDown: () => void;
+    /** Element currently being inspected in sidebar */
+    inspectedElement: InspectedElement | null;
+    /** Set the element to inspect (opens sidebar) */
+    setInspectedElement: (element: InspectedElement | null) => void;
 }
 /**
  * Props for the UILintProvider component
@@ -118,7 +93,6 @@ interface UILintContextValue {
 interface UILintProviderProps {
     children: React.ReactNode;
     enabled?: boolean;
-    defaultMode?: UILintMode;
 }
 /**
  * Response from the source API
@@ -155,34 +129,36 @@ declare function useUILintContext(): UILintContextValue;
 /**
  * UILint Provider Component
  */
-declare function UILintProvider({ children, enabled, defaultMode, }: UILintProviderProps): react_jsx_runtime.JSX.Element;
+declare function UILintProvider({ children, enabled, }: UILintProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
- * UILint Toolbar - Floating pill-shaped toolbar with mode toggles and settings
+ * UILint Toolbar - Simple floating button with settings popover
  */
 
 /**
- * Main Toolbar Component
+ * Main Toolbar Component - Simple floating button with settings popover
  */
 declare function UILintToolbar(): React$1.ReactPortal | null;
 
 /**
- * Source Overlays - Colored rectangles over components with file labels
+ * Inspection Panel - Slide-out sidebar showing element details, source preview,
+ * and LLM analysis with clipboard-ready fix prompts
  */
 
 /**
- * Main Source Overlays Component
+ * Main Inspection Panel Component
  */
-declare function SourceOverlays(): React$1.ReactPortal | null;
+declare function InspectionPanel(): React$1.ReactPortal | null;
 
 /**
- * Inspection Panel - Slide-out panel showing element details and source preview
+ * Locator Overlay - Shows element info when Alt/Option key is held
+ * Inspired by LocatorJS for a quick "hover to find source" experience
  */
 
 /**
- * Main Inspection Panel Component
+ * Main Locator Overlay Component
  */
-declare function InspectionPanel(): React$1.ReactPortal | null;
+declare function LocatorOverlay(): React$1.ReactPortal | null;
 
 /**
  * React Fiber inspection utilities for source file visualization
@@ -287,21 +263,6 @@ declare function getCachedSource(filePath: string): SourceApiResponse | null;
  */
 declare function prefetchSources(filePaths: string[]): Promise<void>;
 
-interface UseElementScanOptions {
-    enabled: boolean;
-    settings: UILintSettings;
-}
-interface UseElementScanResult {
-    elements: ScannedElement[];
-    sourceFiles: SourceFile[];
-    isScanning: boolean;
-    rescan: () => void;
-}
-/**
- * Hook for managing element scanning
- */
-declare function useElementScan({ enabled, settings, }: UseElementScanOptions): UseElementScanResult;
-
 /**
  * DOM snapshotting for consistency analysis
  */
@@ -382,4 +343,4 @@ declare class LLMClient {
     generateStyleGuide(styles: ExtractedStyles): Promise<string | null>;
 }
 
-export { type CachedSource, type ComponentInfo, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, InspectionPanel, LLMClient, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, SourceOverlays, UILint, type UILintContextValue, type UILintMode, type UILintProps, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getComponentStack, getDebugOwner, getDebugSource, getDisplayName, getElementById, getElementBySnapshotId, getFiberFromElement, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useElementScan, useUILint, useUILintContext };
+export { type CachedSource, type ComponentInfo, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, type InspectedElement, InspectionPanel, LLMClient, LocatorOverlay, type LocatorTarget, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, type UILintContextValue, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getComponentStack, getDebugOwner, getDebugSource, getDisplayName, getElementById, getElementBySnapshotId, getFiberFromElement, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useUILintContext };