uilint-react 0.1.18 → 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-VYCIUDU7.js

@@ -0,0 +1,283 @@
+"use client";
+import {
+  useUILintContext
+} from "./chunk-DAFFOBEU.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" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+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,
+  InspectedElementHighlight
+};