uilint-react 0.1.17 → 0.1.19

package/dist/chunk-KUFV22FO.js

@@ -0,0 +1,213 @@
+"use client";
+import {
+  useUILintContext
+} from "./chunk-7WYVWDRU.js";
+
+// src/components/ui-lint/LocatorOverlay.tsx
+import { useState, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STYLES = {
+  bg: "rgba(17, 24, 39, 0.95)",
+  border: "rgba(59, 130, 246, 0.8)",
+  borderHighlight: "#3B82F6",
+  text: "#F9FAFB",
+  textMuted: "#9CA3AF",
+  accent: "#3B82F6",
+  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+  shadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
+  blur: "blur(12px)"
+};
+function getFileName(path) {
+  const parts = path.split("/");
+  return parts[parts.length - 1] || path;
+}
+function LocatorOverlay() {
+  const { locatorTarget } = useUILintContext();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const currentSource = useMemo(() => {
+    if (!locatorTarget) return null;
+    if (locatorTarget.stackIndex === 0) {
+      return locatorTarget.source;
+    }
+    const stackItem = locatorTarget.componentStack[locatorTarget.stackIndex - 1];
+    return stackItem?.source || null;
+  }, [locatorTarget]);
+  const currentName = useMemo(() => {
+    if (!locatorTarget) return "";
+    if (locatorTarget.stackIndex === 0) {
+      return locatorTarget.element.tagName.toLowerCase();
+    }
+    const stackItem = locatorTarget.componentStack[locatorTarget.stackIndex - 1];
+    return stackItem?.name || "Unknown";
+  }, [locatorTarget]);
+  if (!mounted || !locatorTarget) return null;
+  const { rect } = locatorTarget;
+  const hasParents = locatorTarget.componentStack.length > 0;
+  const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes uilint-locator-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes uilint-locator-pulse {
+          0%, 100% { opacity: 0.8; }
+          50% { opacity: 1; }
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: rect.top - 2,
+          left: rect.left - 2,
+          width: rect.width + 4,
+          height: rect.height + 4,
+          border: `2px solid ${STYLES.borderHighlight}`,
+          borderRadius: "4px",
+          boxShadow: `0 0 0 1px rgba(59, 130, 246, 0.3), inset 0 0 0 1px rgba(59, 130, 246, 0.1)`,
+          animation: "uilint-locator-fade-in 0.1s ease-out",
+          zIndex: 99997
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InfoTooltip,
+      {
+        rect,
+        source: currentSource,
+        componentName: currentName,
+        stackIndex: locatorTarget.stackIndex,
+        stackLength: locatorTarget.componentStack.length,
+        hasParents
+      }
+    )
+  ] });
+  return createPortal(content, document.body);
+}
+function InfoTooltip({
+  rect,
+  source,
+  componentName,
+  stackIndex,
+  stackLength,
+  hasParents
+}) {
+  const viewportHeight = window.innerHeight;
+  const spaceAbove = rect.top;
+  const spaceBelow = viewportHeight - rect.bottom;
+  const positionAbove = spaceAbove > 100 || spaceBelow < 100;
+  const tooltipStyle = {
+    position: "fixed",
+    left: Math.max(8, Math.min(rect.left, window.innerWidth - 320)),
+    zIndex: 99999,
+    animation: "uilint-locator-fade-in 0.15s ease-out"
+  };
+  if (positionAbove) {
+    tooltipStyle.bottom = viewportHeight - rect.top + 8;
+  } else {
+    tooltipStyle.top = rect.bottom + 8;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...tooltipStyle,
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+        padding: "10px 12px",
+        borderRadius: "8px",
+        backgroundColor: STYLES.bg,
+        backdropFilter: STYLES.blur,
+        WebkitBackdropFilter: STYLES.blur,
+        border: `1px solid ${STYLES.border}`,
+        boxShadow: STYLES.shadow,
+        fontFamily: STYLES.font,
+        maxWidth: "320px",
+        pointerEvents: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                fontSize: "13px",
+                fontWeight: 600,
+                color: STYLES.accent
+              },
+              children: [
+                "<",
+                componentName,
+                " />"
+              ]
+            }
+          ),
+          hasParents && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "10px",
+                color: STYLES.textMuted,
+                padding: "2px 6px",
+                backgroundColor: "rgba(59, 130, 246, 0.15)",
+                borderRadius: "4px"
+              },
+              children: stackIndex === 0 ? "element" : `parent ${stackIndex}/${stackLength}`
+            }
+          )
+        ] }),
+        source && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              fontSize: "11px",
+              fontFamily: STYLES.fontMono,
+              color: STYLES.text
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { opacity: 0.9 }, children: getFileName(source.fileName) }),
+              /* @__PURE__ */ jsx("span", { style: { color: STYLES.textMuted }, children: ":" }),
+              /* @__PURE__ */ jsx("span", { style: { color: STYLES.accent }, children: source.lineNumber })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              fontSize: "10px",
+              color: STYLES.textMuted,
+              borderTop: `1px solid rgba(75, 85, 99, 0.3)`,
+              paddingTop: "8px",
+              marginTop: "2px"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Click to open" }),
+              hasParents && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "\u2022" }),
+                /* @__PURE__ */ jsx("span", { children: "Scroll to navigate parents" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  LocatorOverlay
+};

package/dist/chunk-MEP7WO7U.js

@@ -0,0 +1,210 @@
+"use client";
+import {
+  buildEditorUrl,
+  useUILintContext
+} from "./chunk-7WYVWDRU.js";
+
+// src/components/ui-lint/SourceOverlays.tsx
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLES = {
+  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+  shadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+};
+function getLabelPositionStyles(position) {
+  switch (position) {
+    case "top-left":
+      return { top: "-1px", left: "-1px" };
+    case "top-right":
+      return { top: "-1px", right: "-1px" };
+    case "bottom-left":
+      return { bottom: "-1px", left: "-1px" };
+    case "bottom-right":
+      return { bottom: "-1px", right: "-1px" };
+  }
+}
+function SourceOverlays() {
+  const {
+    sourceFiles,
+    scannedElements,
+    settings,
+    selectedElement,
+    setSelectedElement,
+    hoveredElement,
+    setHoveredElement,
+    mode
+  } = useUILintContext();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const elementToFile = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const file of sourceFiles) {
+      for (const element of file.elements) {
+        map.set(element.id, file);
+      }
+    }
+    return map;
+  }, [sourceFiles]);
+  const handleElementClick = useCallback(
+    (element) => {
+      if (mode === "inspect") {
+        setSelectedElement(
+          selectedElement?.id === element.id ? null : element
+        );
+      }
+    },
+    [mode, selectedElement, setSelectedElement]
+  );
+  const handleLabelClick = useCallback(
+    (element, e) => {
+      e.stopPropagation();
+      if (element.source) {
+        const url = buildEditorUrl(element.source, "cursor");
+        window.open(url, "_blank");
+      }
+    },
+    []
+  );
+  if (!mounted) return null;
+  const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes uilint-overlay-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      ` }),
+    scannedElements.map((element) => {
+      const file = elementToFile.get(element.id);
+      if (!file) return null;
+      const isSelected = selectedElement?.id === element.id;
+      const isHovered = hoveredElement?.id === element.id;
+      return /* @__PURE__ */ jsx(
+        ElementOverlay,
+        {
+          element,
+          file,
+          settings,
+          isSelected,
+          isHovered,
+          onHover: () => setHoveredElement(element),
+          onLeave: () => setHoveredElement(null),
+          onClick: () => handleElementClick(element),
+          onLabelClick: (e) => handleLabelClick(element, e),
+          showClickable: mode === "inspect"
+        },
+        element.id
+      );
+    })
+  ] });
+  return createPortal(content, document.body);
+}
+function ElementOverlay({
+  element,
+  file,
+  settings,
+  isSelected,
+  isHovered,
+  onHover,
+  onLeave,
+  onClick,
+  onLabelClick,
+  showClickable
+}) {
+  const { rect } = element;
+  if (rect.width < 20 || rect.height < 20) return null;
+  if (rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth) {
+    return null;
+  }
+  const borderWidth = isSelected ? 3 : isHovered ? 2 : 1.5;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+        border: `${borderWidth}px solid ${file.color}`,
+        borderRadius: "2px",
+        pointerEvents: showClickable ? "auto" : "none",
+        cursor: showClickable ? "pointer" : "default",
+        zIndex: isSelected ? 99998 : isHovered ? 99997 : 99996,
+        animation: "uilint-overlay-fade-in 0.15s ease-out",
+        transition: "border-width 0.15s"
+      },
+      onMouseEnter: onHover,
+      onMouseLeave: onLeave,
+      onClick,
+      children: settings.showLabels && /* @__PURE__ */ jsx(
+        FileLabel,
+        {
+          file,
+          element,
+          position: settings.labelPosition,
+          isHovered,
+          isSelected,
+          onClick: onLabelClick
+        }
+      )
+    }
+  );
+}
+function FileLabel({
+  file,
+  element,
+  position,
+  isHovered,
+  isSelected,
+  onClick
+}) {
+  const [showFullPath, setShowFullPath] = useState(false);
+  const positionStyles = getLabelPositionStyles(position);
+  const displayName = file.displayName.length > 20 ? file.displayName.slice(0, 17) + "..." : file.displayName;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        ...positionStyles,
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        padding: "2px 6px",
+        borderRadius: "3px",
+        backgroundColor: file.color,
+        color: "#FFFFFF",
+        fontSize: "10px",
+        fontWeight: 600,
+        fontFamily: STYLES.fontMono,
+        whiteSpace: "nowrap",
+        pointerEvents: "auto",
+        cursor: "pointer",
+        boxShadow: STYLES.shadow,
+        transition: "transform 0.1s, padding 0.1s",
+        transform: isHovered || isSelected ? "scale(1.05)" : "scale(1)",
+        zIndex: 99999
+      },
+      onMouseEnter: () => setShowFullPath(true),
+      onMouseLeave: () => setShowFullPath(false),
+      onClick,
+      title: `${file.path}:${element.source?.lineNumber || "?"}
+Click to open in editor`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: displayName }),
+        element.source?.lineNumber && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.8, fontSize: "9px" }, children: [
+          ":",
+          element.source.lineNumber
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  SourceOverlays
+};