uilint-react 0.1.19 → 0.1.21

package/dist/{chunk-7WYVWDRU.js → chunk-EBU7YY73.js}

@@ -28,10 +28,7 @@ var FILE_COLORS = [
   // purple
 ];
 var DEFAULT_SETTINGS = {
-  showLabels: true,
-  hideNodeModules: true,
-  overlayOpacity: 0.2,
-  labelPosition: "top-left"
+  hideNodeModules: true
 };
 var DATA_UILINT_ID = "data-ui-lint-id";
 
@@ -250,127 +247,13 @@ function buildEditorUrl(source, editor = "cursor") {
   )}:${lineNumber}:${column}`;
 }
 
-// src/components/ui-lint/use-element-scan.ts
-import { useState, useEffect, useCallback, useRef } from "react";
-function debounce(fn, delay) {
-  let timeoutId;
-  return (...args) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn(...args), delay);
-  };
-}
-function useElementScan({
-  enabled,
-  settings
-}) {
-  const [elements, setElements] = useState([]);
-  const [sourceFiles, setSourceFiles] = useState([]);
-  const [isScanning, setIsScanning] = useState(false);
-  const mutationObserverRef = useRef(null);
-  const resizeObserverRef = useRef(null);
-  const performScan = useCallback(() => {
-    if (!enabled || typeof window === "undefined") return;
-    setIsScanning(true);
-    const scan = () => {
-      try {
-        const scannedElements = scanDOMForSources(
-          document.body,
-          settings.hideNodeModules
-        );
-        const files = groupBySourceFile(scannedElements);
-        setElements(scannedElements);
-        setSourceFiles(files);
-      } catch (error) {
-        console.error("[UILint] Scan error:", error);
-      } finally {
-        setIsScanning(false);
-      }
-    };
-    if ("requestIdleCallback" in window) {
-      window.requestIdleCallback(scan, { timeout: 1e3 });
-    } else {
-      setTimeout(scan, 0);
-    }
-  }, [enabled, settings.hideNodeModules]);
-  const updatePositions = useCallback(() => {
-    if (elements.length === 0) return;
-    setElements((prev) => updateElementRects(prev));
-  }, [elements.length]);
-  const debouncedRescan = useCallback(
-    debounce(() => {
-      performScan();
-    }, 500),
-    [performScan]
-  );
-  const handleScroll = useCallback(
-    debounce(() => {
-      updatePositions();
-    }, 16),
-    // ~60fps
-    [updatePositions]
-  );
-  const handleResize = useCallback(
-    debounce(() => {
-      updatePositions();
-    }, 100),
-    [updatePositions]
-  );
-  useEffect(() => {
-    if (!enabled) {
-      cleanupDataAttributes();
-      setElements([]);
-      setSourceFiles([]);
-      return;
-    }
-    const initialScanTimer = setTimeout(performScan, 100);
-    mutationObserverRef.current = new MutationObserver((mutations) => {
-      const hasRelevantMutation = mutations.some((mutation) => {
-        if (mutation.type === "attributes") {
-          return !mutation.attributeName?.startsWith("data-ui-lint");
-        }
-        return true;
-      });
-      if (hasRelevantMutation) {
-        debouncedRescan();
-      }
-    });
-    mutationObserverRef.current.observe(document.body, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["class", "style"]
-    });
-    window.addEventListener("scroll", handleScroll, true);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      clearTimeout(initialScanTimer);
-      mutationObserverRef.current?.disconnect();
-      resizeObserverRef.current?.disconnect();
-      window.removeEventListener("scroll", handleScroll, true);
-      window.removeEventListener("resize", handleResize);
-      cleanupDataAttributes();
-    };
-  }, [enabled, performScan, debouncedRescan, handleScroll, handleResize]);
-  useEffect(() => {
-    if (enabled && elements.length > 0) {
-      performScan();
-    }
-  }, [settings.hideNodeModules]);
-  return {
-    elements,
-    sourceFiles,
-    isScanning,
-    rescan: performScan
-  };
-}
-
 // src/components/ui-lint/UILintProvider.tsx
 import {
   createContext,
   useContext,
-  useState as useState2,
-  useEffect as useEffect2,
-  useCallback as useCallback2,
+  useState,
+  useEffect,
+  useCallback,
   useMemo
 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -387,54 +270,28 @@ function isBrowser() {
 }
 function UILintProvider({
   children,
-  enabled = true,
-  defaultMode = "off"
+  enabled = true
 }) {
-  const [mode, setMode] = useState2(defaultMode);
-  const [settings, setSettings] = useState2(DEFAULT_SETTINGS);
-  const [selectedElement, setSelectedElement] = useState2(
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  const [isMounted, setIsMounted] = useState(false);
+  const [altKeyHeld, setAltKeyHeld] = useState(false);
+  const [locatorTarget, setLocatorTarget] = useState(
     null
   );
-  const [hoveredElement, setHoveredElement] = useState2(
-    null
-  );
-  const [isMounted, setIsMounted] = useState2(false);
-  const [altKeyHeld, setAltKeyHeld] = useState2(false);
-  const [locatorTarget, setLocatorTarget] = useState2(
-    null
-  );
-  const [locatorStackIndex, setLocatorStackIndex] = useState2(0);
-  const isActive = enabled && mode !== "off";
-  const { elements, sourceFiles, isScanning, rescan } = useElementScan({
-    enabled: isActive,
-    settings
-  });
-  const updateSettings = useCallback2((partial) => {
+  const [locatorStackIndex, setLocatorStackIndex] = useState(0);
+  const [inspectedElement, setInspectedElement] = useState(null);
+  const updateSettings = useCallback((partial) => {
     setSettings((prev) => ({ ...prev, ...partial }));
   }, []);
-  const toggleMode = useCallback2(() => {
-    setMode((prev) => {
-      if (prev === "off") return "sources";
-      if (prev === "sources") return "inspect";
-      return "off";
-    });
-  }, []);
-  const handleEscape = useCallback2(() => {
-    if (selectedElement) {
-      setSelectedElement(null);
-    } else if (mode !== "off") {
-      setMode("off");
-    }
-  }, [selectedElement, mode]);
-  const locatorGoUp = useCallback2(() => {
+  const locatorGoUp = useCallback(() => {
     if (!locatorTarget) return;
     const maxIndex = locatorTarget.componentStack.length;
     setLocatorStackIndex((prev) => Math.min(prev + 1, maxIndex));
   }, [locatorTarget]);
-  const locatorGoDown = useCallback2(() => {
+  const locatorGoDown = useCallback(() => {
     setLocatorStackIndex((prev) => Math.max(prev - 1, 0));
   }, []);
-  const getLocatorTargetFromElement = useCallback2(
+  const getLocatorTargetFromElement = useCallback(
     (element) => {
       if (element.closest("[data-ui-lint]")) return null;
       let source = getSourceFromDataLoc(element);
@@ -470,7 +327,7 @@ function UILintProvider({
     },
     [settings.hideNodeModules]
   );
-  const handleMouseMove = useCallback2(
+  const handleMouseMove = useCallback(
     (e) => {
       if (!altKeyHeld) return;
       const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
@@ -491,7 +348,7 @@ function UILintProvider({
     },
     [altKeyHeld, getLocatorTargetFromElement]
   );
-  const handleLocatorClick = useCallback2(
+  const handleLocatorClick = useCallback(
     (e) => {
       if (!altKeyHeld || !locatorTarget) return;
       e.preventDefault();
@@ -503,14 +360,19 @@ function UILintProvider({
           source = stackItem.source;
         }
       }
-      if (source) {
-        const url = buildEditorUrl(source, "cursor");
-        window.open(url, "_blank");
-      }
+      setInspectedElement({
+        element: locatorTarget.element,
+        source,
+        componentStack: locatorTarget.componentStack,
+        rect: locatorTarget.rect
+      });
+      setAltKeyHeld(false);
+      setLocatorTarget(null);
+      setLocatorStackIndex(0);
     },
     [altKeyHeld, locatorTarget, locatorStackIndex]
   );
-  useEffect2(() => {
+  useEffect(() => {
     if (!isBrowser() || !enabled) return;
     const handleKeyDown = (e) => {
       if (e.key === "Alt") {
@@ -539,7 +401,7 @@ function UILintProvider({
       window.removeEventListener("blur", handleBlur);
     };
   }, [enabled]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isBrowser() || !enabled || !altKeyHeld) return;
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("click", handleLocatorClick, true);
@@ -548,7 +410,7 @@ function UILintProvider({
       window.removeEventListener("click", handleLocatorClick, true);
     };
   }, [enabled, altKeyHeld, handleMouseMove, handleLocatorClick]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isBrowser() || !enabled || !altKeyHeld) return;
     const handleWheel = (e) => {
       if (!locatorTarget) return;
@@ -562,29 +424,19 @@ function UILintProvider({
     window.addEventListener("wheel", handleWheel, { passive: false });
     return () => window.removeEventListener("wheel", handleWheel);
   }, [enabled, altKeyHeld, locatorTarget, locatorGoUp, locatorGoDown]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isBrowser() || !enabled) return;
     const handleKeyDown = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "d") {
-        e.preventDefault();
-        toggleMode();
-        return;
-      }
-      if (e.key === "Escape") {
-        handleEscape();
-        return;
+      if (e.key === "Escape" && inspectedElement) {
+        setInspectedElement(null);
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [enabled, toggleMode, handleEscape]);
-  useEffect2(() => {
+  }, [enabled, inspectedElement]);
+  useEffect(() => {
     setIsMounted(true);
   }, []);
-  useEffect2(() => {
-    setSelectedElement(null);
-    setHoveredElement(null);
-  }, [mode]);
   const effectiveLocatorTarget = useMemo(() => {
     if (!locatorTarget) return null;
     return {
@@ -594,37 +446,23 @@ function UILintProvider({
   }, [locatorTarget, locatorStackIndex]);
   const contextValue = useMemo(
     () => ({
-      mode,
-      setMode,
-      scannedElements: elements,
-      sourceFiles,
-      selectedElement,
-      setSelectedElement,
-      hoveredElement,
-      setHoveredElement,
       settings,
       updateSettings,
-      rescan,
-      isScanning,
       altKeyHeld,
       locatorTarget: effectiveLocatorTarget,
       locatorGoUp,
-      locatorGoDown
+      locatorGoDown,
+      inspectedElement,
+      setInspectedElement
     }),
     [
-      mode,
-      elements,
-      sourceFiles,
-      selectedElement,
-      hoveredElement,
       settings,
       updateSettings,
-      rescan,
-      isScanning,
       altKeyHeld,
       effectiveLocatorTarget,
       locatorGoUp,
-      locatorGoDown
+      locatorGoDown,
+      inspectedElement
     ]
   );
   const shouldRenderUI = enabled && isMounted;
@@ -634,33 +472,31 @@ function UILintProvider({
   ] });
 }
 function UILintUI() {
-  const { mode, altKeyHeld } = useUILintContext();
-  const [components, setComponents] = useState2(null);
-  useEffect2(() => {
+  const { altKeyHeld, inspectedElement } = useUILintContext();
+  const [components, setComponents] = useState(null);
+  useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-7ZYCQC4M.js"),
-      import("./SourceOverlays-2SEINA2B.js"),
-      import("./InspectionPanel-6DBGEWWD.js"),
-      import("./LocatorOverlay-FQEYAMT6.js")
-    ]).then(([toolbar, overlays, panel, locator]) => {
+      import("./UILintToolbar-C6HOAJA4.js"),
+      import("./InspectionPanel-ZBDXQ2LU.js"),
+      import("./LocatorOverlay-3H446RPO.js")
+    ]).then(([toolbar, panel, locator]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,
-        Overlays: overlays.SourceOverlays,
         Panel: panel.InspectionPanel,
-        LocatorOverlay: locator.LocatorOverlay
+        LocatorOverlay: locator.LocatorOverlay,
+        InspectedHighlight: locator.InspectedElementHighlight
       });
     });
   }, []);
   if (!components) return null;
-  const { Toolbar, Overlays, Panel, LocatorOverlay } = components;
+  const { Toolbar, Panel, LocatorOverlay, InspectedHighlight } = components;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Toolbar, {}),
-    mode === "sources" && /* @__PURE__ */ jsx(Overlays, {}),
-    mode === "inspect" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Overlays, {}),
+    altKeyHeld && /* @__PURE__ */ jsx(LocatorOverlay, {}),
+    inspectedElement && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(InspectedHighlight, {}),
       /* @__PURE__ */ jsx(Panel, {})
-    ] }),
-    altKeyHeld && /* @__PURE__ */ jsx(LocatorOverlay, {})
+    ] })
   ] });
 }
 
@@ -680,7 +516,6 @@ export {
   getElementById,
   updateElementRects,
   buildEditorUrl,
-  useElementScan,
   useUILintContext,
   UILintProvider
 };

package/dist/chunk-GUF36FGA.js

@@ -0,0 +1,276 @@
+"use client";
+import {
+  useUILintContext
+} from "./chunk-EBU7YY73.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
+};