uilint-react 0.2.0 → 0.2.3

package/dist/chunk-K46BWHFU.js

@@ -1,271 +0,0 @@
-"use client";
-import {
-  useUILintContext
-} from "./chunk-552GIJIQ.js";
-
-// src/components/ui-lint/LocatorOverlay.tsx
-import { useState, useEffect, useMemo } from "react";
-import { createPortal } from "react-dom";
-import { 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);
-  const handleUILintInteraction = (e) => {
-    e.stopPropagation();
-  };
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  const currentSource = useMemo(() => {
-    if (!locatorTarget) return null;
-    return locatorTarget.source;
-  }, [locatorTarget]);
-  const currentName = useMemo(() => {
-    if (!locatorTarget) return "";
-    return locatorTarget.element.tagName.toLowerCase();
-  }, [locatorTarget]);
-  if (!mounted || !locatorTarget) return null;
-  const { rect } = locatorTarget;
-  const content = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-ui-lint": true,
-      onMouseDown: handleUILintInteraction,
-      onPointerDown: handleUILintInteraction,
-      onClick: handleUILintInteraction,
-      onKeyDown: handleUILintInteraction,
-      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
-          }
-        )
-      ]
-    }
-  );
-  return createPortal(content, document.body);
-}
-function InfoTooltip({ rect, source, componentName }) {
-  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__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              fontSize: "13px",
-              fontWeight: 600,
-              color: STYLES.accent
-            },
-            children: [
-              "<",
-              componentName,
-              " />"
-            ]
-          }
-        ) }),
-        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__ */ jsx(
-          "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 inspect" })
-          }
-        )
-      ]
-    }
-  );
-}
-function InspectedElementHighlight() {
-  const { inspectedElement } = useUILintContext();
-  const [mounted, setMounted] = useState(false);
-  const [rect, setRect] = useState(null);
-  const handleUILintInteraction = (e) => {
-    e.stopPropagation();
-  };
-  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,
-      onMouseDown: handleUILintInteraction,
-      onPointerDown: handleUILintInteraction,
-      onClick: handleUILintInteraction,
-      onKeyDown: handleUILintInteraction,
-      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,
-  InspectedElementHighlight
-};