uilint-react 0.1.17 → 0.1.19

package/dist/chunk-7WYVWDRU.js

@@ -0,0 +1,686 @@
+"use client";
+
+// src/components/ui-lint/types.ts
+var FILE_COLORS = [
+  "#3B82F6",
+  // blue
+  "#8B5CF6",
+  // violet
+  "#EC4899",
+  // pink
+  "#10B981",
+  // emerald
+  "#F59E0B",
+  // amber
+  "#06B6D4",
+  // cyan
+  "#EF4444",
+  // red
+  "#84CC16",
+  // lime
+  "#6366F1",
+  // indigo
+  "#F97316",
+  // orange
+  "#14B8A6",
+  // teal
+  "#A855F7"
+  // purple
+];
+var DEFAULT_SETTINGS = {
+  showLabels: true,
+  hideNodeModules: true,
+  overlayOpacity: 0.2,
+  labelPosition: "top-left"
+};
+var DATA_UILINT_ID = "data-ui-lint-id";
+
+// src/components/ui-lint/fiber-utils.ts
+var DATA_ATTR = "data-ui-lint-id";
+var COLORS = [
+  "#3B82F6",
+  "#8B5CF6",
+  "#EC4899",
+  "#10B981",
+  "#F59E0B",
+  "#06B6D4",
+  "#EF4444",
+  "#84CC16",
+  "#6366F1",
+  "#F97316",
+  "#14B8A6",
+  "#A855F7"
+];
+var SKIP_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "SVG",
+  "NOSCRIPT",
+  "TEMPLATE",
+  "HEAD",
+  "META",
+  "LINK"
+]);
+var elementCounter = 0;
+function getFiberFromElement(element) {
+  const keys = Object.keys(element);
+  const fiberKey = keys.find((k) => k.startsWith("__reactFiber$"));
+  if (!fiberKey) return null;
+  return element[fiberKey];
+}
+function getDebugSource(fiber) {
+  if (!fiber._debugSource) return null;
+  return {
+    fileName: fiber._debugSource.fileName,
+    lineNumber: fiber._debugSource.lineNumber,
+    columnNumber: fiber._debugSource.columnNumber
+  };
+}
+function getSourceFromDataLoc(element) {
+  const loc = element.getAttribute("data-loc");
+  if (!loc) return null;
+  const parts = loc.split(":");
+  if (parts.length < 2) return null;
+  const lastPart = parts[parts.length - 1];
+  const secondLastPart = parts[parts.length - 2];
+  const lastIsNumber = /^\d+$/.test(lastPart);
+  const secondLastIsNumber = /^\d+$/.test(secondLastPart);
+  if (lastIsNumber && secondLastIsNumber) {
+    const columnNumber = parseInt(lastPart, 10);
+    const lineNumber = parseInt(secondLastPart, 10);
+    const fileName = parts.slice(0, -2).join(":");
+    if (isNaN(lineNumber) || isNaN(columnNumber) || !fileName) return null;
+    return { fileName, lineNumber, columnNumber };
+  } else if (lastIsNumber) {
+    const lineNumber = parseInt(lastPart, 10);
+    const fileName = parts.slice(0, -1).join(":");
+    if (isNaN(lineNumber) || !fileName) return null;
+    return { fileName, lineNumber };
+  }
+  return null;
+}
+function getDebugOwner(fiber) {
+  return fiber._debugOwner ?? null;
+}
+function getComponentName(fiber) {
+  if (!fiber.type) return "Unknown";
+  if (typeof fiber.type === "string") return fiber.type;
+  if (typeof fiber.type === "function") {
+    const fn = fiber.type;
+    return fn.displayName || fn.name || "Anonymous";
+  }
+  return "Unknown";
+}
+function getComponentStack(fiber) {
+  const stack = [];
+  let current = fiber._debugOwner ?? null;
+  while (current && stack.length < 20) {
+    const name = getComponentName(current);
+    const source = getDebugSource(current);
+    if (current.tag <= 2 && name !== "Unknown") {
+      stack.push({ name, source });
+    }
+    current = current._debugOwner ?? current.return;
+  }
+  return stack;
+}
+function isNodeModulesPath(path) {
+  return path.includes("node_modules");
+}
+function getDisplayName(path) {
+  const parts = path.split("/");
+  return parts[parts.length - 1] || path;
+}
+function shouldSkipElement(element) {
+  if (SKIP_TAGS.has(element.tagName.toUpperCase())) return true;
+  if (element.hasAttribute("data-ui-lint")) return true;
+  if (element.getAttribute("aria-hidden") === "true") return true;
+  const styles = window.getComputedStyle(element);
+  if (styles.display === "none" || styles.visibility === "hidden") return true;
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return true;
+  return false;
+}
+function generateElementId() {
+  return `uilint-${++elementCounter}`;
+}
+function scanDOMForSources(root = document.body, hideNodeModules = true) {
+  const elements = [];
+  elementCounter = 0;
+  cleanupDataAttributes();
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node2) => {
+      const el = node2;
+      if (shouldSkipElement(el)) return NodeFilter.FILTER_REJECT;
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  let node = walker.currentNode;
+  while (node) {
+    if (node instanceof Element) {
+      let source = getSourceFromDataLoc(node);
+      let componentStack = [];
+      if (!source) {
+        const fiber = getFiberFromElement(node);
+        if (fiber) {
+          source = getDebugSource(fiber);
+          if (!source && fiber._debugOwner) {
+            source = getDebugSource(fiber._debugOwner);
+          }
+          componentStack = getComponentStack(fiber);
+        }
+      }
+      if (hideNodeModules && source && isNodeModulesPath(source.fileName)) {
+        const appSource = componentStack.find(
+          (c) => c.source && !isNodeModulesPath(c.source.fileName)
+        );
+        if (appSource?.source) {
+          source = appSource.source;
+        } else {
+          node = walker.nextNode();
+          continue;
+        }
+      }
+      if (source) {
+        const id = generateElementId();
+        node.setAttribute(DATA_ATTR, id);
+        const scannedElement = {
+          id,
+          element: node,
+          tagName: node.tagName.toLowerCase(),
+          className: typeof node.className === "string" ? node.className : "",
+          source,
+          componentStack,
+          rect: node.getBoundingClientRect()
+        };
+        elements.push(scannedElement);
+      }
+    }
+    node = walker.nextNode();
+  }
+  return elements;
+}
+function groupBySourceFile(elements) {
+  const fileMap = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    if (!element.source) continue;
+    const path = element.source.fileName;
+    const existing = fileMap.get(path) || [];
+    existing.push(element);
+    fileMap.set(path, existing);
+  }
+  const sourceFiles = [];
+  let colorIndex = 0;
+  for (const [path, elements2] of fileMap) {
+    sourceFiles.push({
+      path,
+      displayName: getDisplayName(path),
+      color: COLORS[colorIndex % COLORS.length],
+      elements: elements2
+    });
+    colorIndex++;
+  }
+  sourceFiles.sort((a, b) => b.elements.length - a.elements.length);
+  return sourceFiles;
+}
+function cleanupDataAttributes() {
+  const elements = document.querySelectorAll(`[${DATA_ATTR}]`);
+  elements.forEach((el) => el.removeAttribute(DATA_ATTR));
+  elementCounter = 0;
+}
+function getElementById(id) {
+  return document.querySelector(`[${DATA_ATTR}="${id}"]`);
+}
+function updateElementRects(elements) {
+  return elements.map((el) => ({
+    ...el,
+    rect: el.element.getBoundingClientRect()
+  }));
+}
+function buildEditorUrl(source, editor = "cursor") {
+  const { fileName, lineNumber, columnNumber } = source;
+  const column = columnNumber ?? 1;
+  if (editor === "cursor") {
+    return `cursor://file/${encodeURIComponent(
+      fileName
+    )}:${lineNumber}:${column}`;
+  }
+  return `vscode://file/${encodeURIComponent(
+    fileName
+  )}:${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,
+  useMemo
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var UILintContext = createContext(null);
+function useUILintContext() {
+  const context = useContext(UILintContext);
+  if (!context) {
+    throw new Error("useUILintContext must be used within a UILintProvider");
+  }
+  return context;
+}
+function isBrowser() {
+  return typeof window !== "undefined";
+}
+function UILintProvider({
+  children,
+  enabled = true,
+  defaultMode = "off"
+}) {
+  const [mode, setMode] = useState2(defaultMode);
+  const [settings, setSettings] = useState2(DEFAULT_SETTINGS);
+  const [selectedElement, setSelectedElement] = useState2(
+    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) => {
+    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(() => {
+    if (!locatorTarget) return;
+    const maxIndex = locatorTarget.componentStack.length;
+    setLocatorStackIndex((prev) => Math.min(prev + 1, maxIndex));
+  }, [locatorTarget]);
+  const locatorGoDown = useCallback2(() => {
+    setLocatorStackIndex((prev) => Math.max(prev - 1, 0));
+  }, []);
+  const getLocatorTargetFromElement = useCallback2(
+    (element) => {
+      if (element.closest("[data-ui-lint]")) return null;
+      let source = getSourceFromDataLoc(element);
+      let componentStack = [];
+      if (!source) {
+        const fiber = getFiberFromElement(element);
+        if (fiber) {
+          source = getDebugSource(fiber);
+          if (!source && fiber._debugOwner) {
+            source = getDebugSource(fiber._debugOwner);
+          }
+          componentStack = getComponentStack(fiber);
+        }
+      }
+      if (!source && componentStack.length === 0) return null;
+      if (settings.hideNodeModules && source && isNodeModulesPath(source.fileName)) {
+        const appSource = componentStack.find(
+          (c) => c.source && !isNodeModulesPath(c.source.fileName)
+        );
+        if (appSource?.source) {
+          source = appSource.source;
+        } else if (componentStack.length === 0) {
+          return null;
+        }
+      }
+      return {
+        element,
+        source,
+        componentStack,
+        rect: element.getBoundingClientRect(),
+        stackIndex: 0
+      };
+    },
+    [settings.hideNodeModules]
+  );
+  const handleMouseMove = useCallback2(
+    (e) => {
+      if (!altKeyHeld) return;
+      const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
+      if (!elementAtPoint) {
+        setLocatorTarget(null);
+        return;
+      }
+      let current = elementAtPoint;
+      while (current) {
+        const target = getLocatorTargetFromElement(current);
+        if (target) {
+          setLocatorTarget(target);
+          return;
+        }
+        current = current.parentElement;
+      }
+      setLocatorTarget(null);
+    },
+    [altKeyHeld, getLocatorTargetFromElement]
+  );
+  const handleLocatorClick = useCallback2(
+    (e) => {
+      if (!altKeyHeld || !locatorTarget) return;
+      e.preventDefault();
+      e.stopPropagation();
+      let source = locatorTarget.source;
+      if (locatorStackIndex > 0 && locatorTarget.componentStack.length > 0) {
+        const stackItem = locatorTarget.componentStack[locatorStackIndex - 1];
+        if (stackItem?.source) {
+          source = stackItem.source;
+        }
+      }
+      if (source) {
+        const url = buildEditorUrl(source, "cursor");
+        window.open(url, "_blank");
+      }
+    },
+    [altKeyHeld, locatorTarget, locatorStackIndex]
+  );
+  useEffect2(() => {
+    if (!isBrowser() || !enabled) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Alt") {
+        setAltKeyHeld(true);
+        setLocatorStackIndex(0);
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (e.key === "Alt") {
+        setAltKeyHeld(false);
+        setLocatorTarget(null);
+        setLocatorStackIndex(0);
+      }
+    };
+    const handleBlur = () => {
+      setAltKeyHeld(false);
+      setLocatorTarget(null);
+      setLocatorStackIndex(0);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [enabled]);
+  useEffect2(() => {
+    if (!isBrowser() || !enabled || !altKeyHeld) return;
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("click", handleLocatorClick, true);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("click", handleLocatorClick, true);
+    };
+  }, [enabled, altKeyHeld, handleMouseMove, handleLocatorClick]);
+  useEffect2(() => {
+    if (!isBrowser() || !enabled || !altKeyHeld) return;
+    const handleWheel = (e) => {
+      if (!locatorTarget) return;
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        locatorGoUp();
+      } else {
+        locatorGoDown();
+      }
+    };
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    return () => window.removeEventListener("wheel", handleWheel);
+  }, [enabled, altKeyHeld, locatorTarget, locatorGoUp, locatorGoDown]);
+  useEffect2(() => {
+    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;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, toggleMode, handleEscape]);
+  useEffect2(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect2(() => {
+    setSelectedElement(null);
+    setHoveredElement(null);
+  }, [mode]);
+  const effectiveLocatorTarget = useMemo(() => {
+    if (!locatorTarget) return null;
+    return {
+      ...locatorTarget,
+      stackIndex: locatorStackIndex
+    };
+  }, [locatorTarget, locatorStackIndex]);
+  const contextValue = useMemo(
+    () => ({
+      mode,
+      setMode,
+      scannedElements: elements,
+      sourceFiles,
+      selectedElement,
+      setSelectedElement,
+      hoveredElement,
+      setHoveredElement,
+      settings,
+      updateSettings,
+      rescan,
+      isScanning,
+      altKeyHeld,
+      locatorTarget: effectiveLocatorTarget,
+      locatorGoUp,
+      locatorGoDown
+    }),
+    [
+      mode,
+      elements,
+      sourceFiles,
+      selectedElement,
+      hoveredElement,
+      settings,
+      updateSettings,
+      rescan,
+      isScanning,
+      altKeyHeld,
+      effectiveLocatorTarget,
+      locatorGoUp,
+      locatorGoDown
+    ]
+  );
+  const shouldRenderUI = enabled && isMounted;
+  return /* @__PURE__ */ jsxs(UILintContext.Provider, { value: contextValue, children: [
+    children,
+    shouldRenderUI && /* @__PURE__ */ jsx(UILintUI, {})
+  ] });
+}
+function UILintUI() {
+  const { mode, altKeyHeld } = useUILintContext();
+  const [components, setComponents] = useState2(null);
+  useEffect2(() => {
+    Promise.all([
+      import("./UILintToolbar-7ZYCQC4M.js"),
+      import("./SourceOverlays-2SEINA2B.js"),
+      import("./InspectionPanel-6DBGEWWD.js"),
+      import("./LocatorOverlay-FQEYAMT6.js")
+    ]).then(([toolbar, overlays, panel, locator]) => {
+      setComponents({
+        Toolbar: toolbar.UILintToolbar,
+        Overlays: overlays.SourceOverlays,
+        Panel: panel.InspectionPanel,
+        LocatorOverlay: locator.LocatorOverlay
+      });
+    });
+  }, []);
+  if (!components) return null;
+  const { Toolbar, Overlays, Panel, LocatorOverlay } = components;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Toolbar, {}),
+    mode === "sources" && /* @__PURE__ */ jsx(Overlays, {}),
+    mode === "inspect" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Overlays, {}),
+      /* @__PURE__ */ jsx(Panel, {})
+    ] }),
+    altKeyHeld && /* @__PURE__ */ jsx(LocatorOverlay, {})
+  ] });
+}
+
+export {
+  FILE_COLORS,
+  DEFAULT_SETTINGS,
+  DATA_UILINT_ID,
+  getFiberFromElement,
+  getDebugSource,
+  getDebugOwner,
+  getComponentStack,
+  isNodeModulesPath,
+  getDisplayName,
+  scanDOMForSources,
+  groupBySourceFile,
+  cleanupDataAttributes,
+  getElementById,
+  updateElementRects,
+  buildEditorUrl,
+  useElementScan,
+  useUILintContext,
+  UILintProvider
+};