uilint-react 0.1.22 → 0.1.24

package/dist/chunk-GFURSJEQ.js

@@ -0,0 +1,537 @@
+"use client";
+import {
+  useUILintContext
+} from "./chunk-I4C3NAUH.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
+}) {
+  const {
+    autoScanState,
+    startAutoScan,
+    pauseAutoScan,
+    resumeAutoScan,
+    stopAutoScan
+  } = useUILintContext();
+  const isScanning = autoScanState.status === "scanning";
+  const isPaused = autoScanState.status === "paused";
+  const isComplete = autoScanState.status === "complete";
+  const isActive = isScanning || isPaused || isComplete;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "100%",
+        right: 0,
+        marginTop: "8px",
+        width: "300px",
+        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}`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: "12px",
+                    fontWeight: 600,
+                    color: STYLES.text,
+                    marginBottom: "10px"
+                  },
+                  children: "Auto-Scan Page"
+                }
+              ),
+              !isActive ? (
+                // Start button
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: startAutoScan,
+                    style: {
+                      width: "100%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "8px",
+                      padding: "10px",
+                      borderRadius: "8px",
+                      border: "none",
+                      backgroundColor: "#10B981",
+                      color: "#FFFFFF",
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      cursor: "pointer",
+                      transition: "background-color 0.15s"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "#059669";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "#10B981";
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ScanIcon, {}),
+                      "Scan All Elements"
+                    ]
+                  }
+                )
+              ) : (
+                // Progress and controls
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        marginBottom: "10px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              justifyContent: "space-between",
+                              fontSize: "11px",
+                              color: STYLES.textMuted,
+                              marginBottom: "4px"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: isComplete ? "Complete" : isPaused ? "Paused" : "Scanning..." }),
+                              /* @__PURE__ */ jsxs("span", { children: [
+                                autoScanState.currentIndex,
+                                " / ",
+                                autoScanState.totalElements
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              height: "4px",
+                              backgroundColor: "rgba(75, 85, 99, 0.5)",
+                              borderRadius: "2px",
+                              overflow: "hidden"
+                            },
+                            children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  height: "100%",
+                                  width: `${autoScanState.totalElements > 0 ? autoScanState.currentIndex / autoScanState.totalElements * 100 : 0}%`,
+                                  backgroundColor: isComplete ? "#10B981" : STYLES.accent,
+                                  transition: "width 0.2s ease-out"
+                                }
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+                    isScanning && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: pauseAutoScan,
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: "6px",
+                          padding: "8px",
+                          borderRadius: "6px",
+                          border: `1px solid ${STYLES.border}`,
+                          backgroundColor: "transparent",
+                          color: STYLES.text,
+                          fontSize: "11px",
+                          fontWeight: 500,
+                          cursor: "pointer",
+                          transition: "all 0.15s"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = STYLES.bgHover;
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(PauseIcon, {}),
+                          "Pause"
+                        ]
+                      }
+                    ),
+                    isPaused && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: resumeAutoScan,
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: "6px",
+                          padding: "8px",
+                          borderRadius: "6px",
+                          border: "none",
+                          backgroundColor: STYLES.accent,
+                          color: "#FFFFFF",
+                          fontSize: "11px",
+                          fontWeight: 500,
+                          cursor: "pointer",
+                          transition: "all 0.15s"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = STYLES.accentHover;
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = STYLES.accent;
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(PlayIcon, {}),
+                          "Resume"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: stopAutoScan,
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          gap: "6px",
+                          padding: "8px",
+                          borderRadius: "6px",
+                          border: `1px solid ${STYLES.border}`,
+                          backgroundColor: "transparent",
+                          color: STYLES.textMuted,
+                          fontSize: "11px",
+                          fontWeight: 500,
+                          cursor: "pointer",
+                          transition: "all 0.15s"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = STYLES.bgHover;
+                          e.currentTarget.style.color = STYLES.text;
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "transparent";
+                          e.currentTarget.style.color = STYLES.textMuted;
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(StopIcon, {}),
+                          isComplete ? "Clear" : "Stop"
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: "8px",
+                    fontSize: "10px",
+                    color: STYLES.textMuted,
+                    lineHeight: 1.4
+                  },
+                  children: "Scan all elements for style issues and show badges"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__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"
+      }
+    )
+  ] });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function PauseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", fill: "currentColor" })
+  ] });
+}
+function PlayIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7L8 5z", fill: "currentColor" }) });
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1", fill: "currentColor" }) });
+}
+
+export {
+  UILintToolbar
+};