uilint-react 0.1.19 → 0.1.21

package/dist/chunk-OWX36QE3.js

@@ -1,595 +0,0 @@
-"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
-};