uilint-react 0.1.17 → 0.1.19

package/dist/chunk-OWX36QE3.js

@@ -0,0 +1,595 @@
+"use client";
+import {
+  useUILintContext
+} from "./chunk-7WYVWDRU.js";
+
+// src/components/ui-lint/UILintToolbar.tsx
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, 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'
+};
+var MODES = [
+  { id: "off", label: "Off", icon: "\u25CB" },
+  { id: "sources", label: "Sources", icon: "\u25C9" },
+  { id: "inspect", label: "Inspect", icon: "\u25CE" }
+];
+function UILintToolbar() {
+  const {
+    mode,
+    setMode,
+    scannedElements,
+    sourceFiles,
+    settings,
+    updateSettings,
+    rescan,
+    isScanning
+  } = useUILintContext();
+  const [isExpanded, setIsExpanded] = useState(false);
+  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;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ui-lint": true,
+      style: {
+        position: "fixed",
+        bottom: "24px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 99999,
+        fontFamily: STYLES.font
+      },
+      children: [
+        !isExpanded && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(true),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "48px",
+              height: "48px",
+              borderRadius: "50%",
+              border: `1px solid ${STYLES.border}`,
+              backgroundColor: STYLES.bg,
+              backdropFilter: STYLES.blur,
+              WebkitBackdropFilter: STYLES.blur,
+              boxShadow: STYLES.shadow,
+              cursor: "pointer",
+              transition: "all 0.2s ease-out",
+              color: mode === "off" ? STYLES.textMuted : STYLES.accent,
+              fontSize: "20px"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "scale(1.1)";
+              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 (\u2318+Shift+D)",
+            children: isScanning ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(UILintIcon, { active: mode !== "off" })
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "6px",
+              borderRadius: "28px",
+              border: `1px solid ${STYLES.border}`,
+              backgroundColor: STYLES.bg,
+              backdropFilter: STYLES.blur,
+              WebkitBackdropFilter: STYLES.blur,
+              boxShadow: STYLES.shadow,
+              animation: "uilint-fade-in 0.2s ease-out",
+              minWidth: "380px"
+            },
+            children: [
+              /* @__PURE__ */ jsx("style", { children: `
+            @keyframes uilint-fade-in {
+              from { opacity: 0; transform: scale(0.95); }
+              to { opacity: 1; transform: scale(1); }
+            }
+            @keyframes uilint-spin {
+              from { transform: rotate(0deg); }
+              to { transform: rotate(360deg); }
+            }
+          ` }),
+              MODES.map((m) => /* @__PURE__ */ jsx(
+                ModeButton,
+                {
+                  mode: m,
+                  isActive: mode === m.id,
+                  onClick: () => setMode(m.id)
+                },
+                m.id
+              )),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "1px",
+                    height: "24px",
+                    backgroundColor: STYLES.border,
+                    margin: "0 4px"
+                  }
+                }
+              ),
+              mode !== "off" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    padding: "6px 10px",
+                    borderRadius: "16px",
+                    backgroundColor: "rgba(59, 130, 246, 0.15)",
+                    fontSize: "12px",
+                    color: STYLES.accent,
+                    fontWeight: 500,
+                    minWidth: "120px"
+                  },
+                  children: isScanning ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }),
+                    /* @__PURE__ */ jsx("span", { children: "Scanning..." })
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      sourceFiles.length,
+                      " files"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { style: { color: STYLES.textMuted }, children: "\u2022" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      scannedElements.length,
+                      " elements"
+                    ] })
+                  ] })
+                }
+              ),
+              mode !== "off" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: rescan,
+                  disabled: isScanning,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "50%",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    color: STYLES.textMuted,
+                    cursor: isScanning ? "not-allowed" : "pointer",
+                    opacity: isScanning ? 0.5 : 1,
+                    transition: "all 0.15s"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!isScanning) {
+                      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;
+                  },
+                  title: "Rescan page",
+                  children: /* @__PURE__ */ jsx(RefreshIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: settingsRef, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setShowSettings(!showSettings),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "32px",
+                      height: "32px",
+                      borderRadius: "50%",
+                      border: "none",
+                      backgroundColor: showSettings ? STYLES.bgHover : "transparent",
+                      color: showSettings ? STYLES.text : STYLES.textMuted,
+                      cursor: "pointer",
+                      transition: "all 0.15s"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = STYLES.bgHover;
+                      e.currentTarget.style.color = STYLES.text;
+                    },
+                    onMouseLeave: (e) => {
+                      if (!showSettings) {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                        e.currentTarget.style.color = STYLES.textMuted;
+                      }
+                    },
+                    title: "Settings",
+                    children: /* @__PURE__ */ jsx(SettingsIcon, {})
+                  }
+                ),
+                showSettings && /* @__PURE__ */ jsx(
+                  SettingsPopover,
+                  {
+                    settings,
+                    onUpdate: updateSettings
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsExpanded(false),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "50%",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    color: STYLES.textMuted,
+                    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;
+                  },
+                  title: "Collapse",
+                  children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        !isExpanded && mode === "off" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "100%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              marginTop: "8px",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              backgroundColor: STYLES.bg,
+              border: `1px solid ${STYLES.border}`,
+              fontSize: "11px",
+              color: STYLES.textMuted,
+              whiteSpace: "nowrap",
+              opacity: 0,
+              transition: "opacity 0.2s",
+              pointerEvents: "none"
+            },
+            className: "uilint-hint",
+            children: "\u2318+Shift+D"
+          }
+        )
+      ]
+    }
+  );
+  return createPortal(content, document.body);
+}
+function ModeButton({
+  mode,
+  isActive,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "8px 14px",
+        borderRadius: "20px",
+        border: "none",
+        backgroundColor: isActive ? STYLES.accent : "transparent",
+        color: isActive ? "#FFFFFF" : STYLES.textMuted,
+        fontSize: "13px",
+        fontWeight: 500,
+        cursor: "pointer",
+        transition: "all 0.15s ease-out",
+        fontFamily: STYLES.font
+      },
+      onMouseEnter: (e) => {
+        if (!isActive) {
+          e.currentTarget.style.backgroundColor = STYLES.bgHover;
+          e.currentTarget.style.color = STYLES.text;
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isActive) {
+          e.currentTarget.style.backgroundColor = "transparent";
+          e.currentTarget.style.color = STYLES.textMuted;
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "14px" }, children: mode.icon }),
+        /* @__PURE__ */ jsx("span", { children: mode.label })
+      ]
+    }
+  );
+}
+function SettingsPopover({
+  settings,
+  onUpdate
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: "100%",
+        right: 0,
+        marginBottom: "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: "Settings" }),
+        /* @__PURE__ */ jsx(
+          SettingToggle,
+          {
+            label: "Show file labels",
+            checked: settings.showLabels,
+            onChange: (checked) => onUpdate({ showLabels: checked })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingToggle,
+          {
+            label: "Hide node_modules",
+            checked: settings.hideNodeModules,
+            onChange: (checked) => onUpdate({ hideNodeModules: checked })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: "12px" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: "12px",
+                color: STYLES.textMuted,
+                marginBottom: "6px"
+              },
+              children: "Label position"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: settings.labelPosition,
+              onChange: (e) => onUpdate({ labelPosition: e.target.value }),
+              style: {
+                width: "100%",
+                padding: "6px 8px",
+                borderRadius: "6px",
+                border: `1px solid ${STYLES.border}`,
+                backgroundColor: STYLES.bgHover,
+                color: STYLES.text,
+                fontSize: "12px",
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "top-left", children: "Top Left" }),
+                /* @__PURE__ */ jsx("option", { value: "top-right", children: "Top Right" }),
+                /* @__PURE__ */ jsx("option", { value: "bottom-left", children: "Bottom Left" }),
+                /* @__PURE__ */ jsx("option", { value: "bottom-right", children: "Bottom Right" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+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 SpinnerIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style: { animation: "uilint-spin 1s linear infinite" },
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeDasharray: "31.4 31.4",
+          fill: "none"
+        }
+      )
+    }
+  );
+}
+function RefreshIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21 3v5h-5",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function SettingsIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 9l6 6 6-6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+export {
+  UILintToolbar
+};