uilint-react 0.2.1 → 0.2.4

package/dist/chunk-Z4AAGFIN.js

@@ -1,933 +0,0 @@
-"use client";
-import {
-  Badge,
-  fetchSourceWithWindow
-} from "./chunk-S4IWHBOQ.js";
-import {
-  buildEditorUrl,
-  useUILintContext,
-  useUILintStore
-} from "./chunk-552GIJIQ.js";
-
-// src/components/ui-lint/InspectionPanel.tsx
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useMemo,
-  useRef
-} from "react";
-import { createPortal } from "react-dom";
-
-// src/components/ui-lint/code-formatting.ts
-function leadingWhitespace(s) {
-  const match = s.match(/^[\t ]+/);
-  return match ? match[0] : "";
-}
-function dedentLines(lines) {
-  if (!lines.length) return { lines, removed: 0 };
-  const nonEmpty = lines.filter((l) => l.trim().length > 0);
-  if (!nonEmpty.length) return { lines, removed: 0 };
-  let min = Infinity;
-  for (const l of nonEmpty) {
-    min = Math.min(min, leadingWhitespace(l).length);
-    if (min === 0) break;
-  }
-  if (!Number.isFinite(min) || min <= 0) return { lines, removed: 0 };
-  return {
-    removed: min,
-    lines: lines.map((l) => l.length >= min ? l.slice(min) : "")
-  };
-}
-
-// src/components/ui-lint/inspection-panel-positioning.ts
-function clamp(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}
-function overflowScore(left, top, size, viewport, padding) {
-  const right = left + size.width;
-  const bottom = top + size.height;
-  const oLeft = Math.max(0, padding - left);
-  const oTop = Math.max(0, padding - top);
-  const oRight = Math.max(0, right - (viewport.width - padding));
-  const oBottom = Math.max(0, bottom - (viewport.height - padding));
-  return oLeft * 2 + oRight * 2 + oTop + oBottom;
-}
-function intersectionArea(a, b) {
-  const x1 = Math.max(a.left, b.left);
-  const y1 = Math.max(a.top, b.top);
-  const x2 = Math.min(a.right, b.right);
-  const y2 = Math.min(a.bottom, b.bottom);
-  const w = Math.max(0, x2 - x1);
-  const h = Math.max(0, y2 - y1);
-  return w * h;
-}
-function computeInspectionPanelPosition(params) {
-  const { rect, popover, viewport } = params;
-  const padding = params.padding ?? 12;
-  const badge = { x: rect.right, y: rect.top };
-  const xMax = viewport.width - popover.width - padding;
-  const yMax = viewport.height - popover.height - padding;
-  const rawCandidates = [
-    {
-      placement: "right",
-      left: rect.right + padding,
-      top: rect.top
-    },
-    {
-      // keep close to the badge by aligning the right edge to rect.right
-      placement: "left",
-      left: rect.right - popover.width - padding,
-      top: rect.top
-    },
-    {
-      placement: "bottom",
-      left: rect.right - popover.width,
-      top: rect.bottom + padding
-    },
-    {
-      placement: "top",
-      left: rect.right - popover.width,
-      top: rect.top - popover.height - padding
-    }
-  ];
-  const candidates = rawCandidates.map((c) => ({
-    raw: c,
-    clamped: {
-      ...c,
-      left: clamp(c.left, padding, xMax),
-      top: clamp(c.top, padding, yMax)
-    }
-  }));
-  const distanceToBadge = (pos) => {
-    const nearestX = clamp(badge.x, pos.left, pos.left + popover.width);
-    const nearestY = clamp(badge.y, pos.top, pos.top + popover.height);
-    const dx = badge.x - nearestX;
-    const dy = badge.y - nearestY;
-    return dx * dx + dy * dy;
-  };
-  const score = (raw, pos) => {
-    const overflow = overflowScore(
-      pos.left,
-      pos.top,
-      popover,
-      viewport,
-      padding
-    );
-    const clampDelta = Math.abs(raw.left - pos.left) + Math.abs(raw.top - pos.top);
-    const box = {
-      left: pos.left,
-      top: pos.top,
-      right: pos.left + popover.width,
-      bottom: pos.top + popover.height
-    };
-    const overlap = intersectionArea(box, rect);
-    const dist = distanceToBadge(pos);
-    return overflow * 1e6 + clampDelta * 1e3 + overlap * 10 + dist;
-  };
-  let best = candidates[0].clamped;
-  let bestScore = score(candidates[0].raw, candidates[0].clamped);
-  for (const c of candidates.slice(1)) {
-    const s = score(c.raw, c.clamped);
-    if (s < bestScore) {
-      best = c.clamped;
-      bestScore = s;
-    }
-  }
-  return best;
-}
-
-// src/components/ui-lint/InspectionPanel.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var STYLES = {
-  bg: "rgba(17, 24, 39, 0.98)",
-  bgSurface: "rgba(31, 41, 55, 0.95)",
-  border: "rgba(75, 85, 99, 0.6)",
-  text: "#F9FAFB",
-  textMuted: "#9CA3AF",
-  textDim: "#6B7280",
-  accent: "#3B82F6",
-  accentHover: "#2563EB",
-  success: "#10B981",
-  warning: "#F59E0B",
-  error: "#EF4444",
-  shadow: "0 8px 32px rgba(0, 0, 0, 0.5)",
-  blur: "blur(12px)",
-  font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
-};
-var POPOVER_WIDTH = 450;
-var POPOVER_MAX_HEIGHT = 450;
-function InspectionPanel() {
-  const {
-    inspectedElement,
-    setInspectedElement,
-    elementIssuesCache,
-    autoScanState
-  } = useUILintContext();
-  const fileIssuesCache = useUILintStore((s) => s.fileIssuesCache);
-  const appRoot = useUILintStore((s) => s.appRoot);
-  const workspaceRoot = useUILintStore((s) => s.workspaceRoot);
-  const editorBaseDir = appRoot || workspaceRoot;
-  const [mounted, setMounted] = useState(false);
-  const [showFullContext, setShowFullContext] = useState(true);
-  const popoverRef = useRef(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (!inspectedElement) return;
-    const handleClickOutside = (e) => {
-      const target = e.target;
-      if (target?.closest?.("[data-ui-lint]")) return;
-      const rect = inspectedElement.element.getBoundingClientRect();
-      if (rect.top < -1e3 || rect.left < -1e3) {
-        inspectedElement.element.remove();
-      }
-      setInspectedElement(null);
-    };
-    const timer = setTimeout(() => {
-      document.addEventListener("click", handleClickOutside, true);
-    }, 50);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [inspectedElement, setInspectedElement]);
-  const isFileLevelIssue = useMemo(() => {
-    if (!inspectedElement) return false;
-    const rect = inspectedElement.element.getBoundingClientRect();
-    return rect.top < -1e3 || rect.left < -1e3;
-  }, [inspectedElement]);
-  const cachedIssue = useMemo(() => {
-    if (!inspectedElement) return null;
-    if (isFileLevelIssue && inspectedElement.source) {
-      const fileIssues = fileIssuesCache.get(inspectedElement.source.fileName);
-      if (fileIssues && fileIssues.length > 0) {
-        const matchingIssues = fileIssues.filter((issue) => {
-          if (issue.line !== inspectedElement.source.lineNumber) return false;
-          if (inspectedElement.source.columnNumber && issue.column !== inspectedElement.source.columnNumber) {
-            return false;
-          }
-          return true;
-        });
-        return {
-          elementId: `file:${inspectedElement.source.fileName}`,
-          issues: matchingIssues.length > 0 ? matchingIssues : fileIssues,
-          status: "complete"
-        };
-      }
-      return null;
-    }
-    if (inspectedElement.scannedElementId) {
-      const cached = elementIssuesCache.get(inspectedElement.scannedElementId);
-      if (cached) return cached;
-    }
-    if (inspectedElement.source) {
-      for (const [, issue] of elementIssuesCache) {
-        const scannedElement = autoScanState.elements.find(
-          (el) => el.id === issue.elementId
-        );
-        if (scannedElement?.source?.fileName === inspectedElement.source.fileName) {
-          return issue;
-        }
-      }
-    }
-    return null;
-  }, [
-    inspectedElement,
-    elementIssuesCache,
-    fileIssuesCache,
-    autoScanState.elements,
-    isFileLevelIssue
-  ]);
-  const eslintIssues = useMemo(() => cachedIssue?.issues || [], [cachedIssue]);
-  const lineRange = useMemo(() => {
-    if (!eslintIssues.length) {
-      return inspectedElement?.source.lineNumber.toString() || "0";
-    }
-    const lines = eslintIssues.map((i) => i.line).sort((a, b) => a - b);
-    const min = lines[0];
-    const max = lines[lines.length - 1];
-    return min === max ? min.toString() : `${min}-${max}`;
-  }, [eslintIssues, inspectedElement]);
-  useEffect(() => {
-    if (!inspectedElement) return;
-    let rafId = null;
-    const update = () => {
-      rafId = null;
-      if (isFileLevelIssue) {
-        const measured2 = popoverRef.current ? {
-          width: popoverRef.current.offsetWidth,
-          height: popoverRef.current.offsetHeight
-        } : null;
-        const popoverSize2 = measured2 ?? {
-          width: POPOVER_WIDTH,
-          height: POPOVER_MAX_HEIGHT
-        };
-        const allUILintElements = document.querySelectorAll("[data-ui-lint]");
-        let scanResultsPopover = null;
-        for (const el of allUILintElements) {
-          const htmlEl = el;
-          if (htmlEl === popoverRef.current) continue;
-          const style = window.getComputedStyle(htmlEl);
-          const width = htmlEl.offsetWidth;
-          const isRightWidth = width >= 310 && width <= 330;
-          const isRightPosition = style.position === "relative" || style.position === "absolute";
-          const rect2 = htmlEl.getBoundingClientRect();
-          const isVisible = rect2.width > 0 && rect2.height > 0;
-          if (isRightWidth && isRightPosition && isVisible) {
-            scanResultsPopover = htmlEl;
-            break;
-          }
-        }
-        const gap = 12;
-        const padding = 12;
-        if (scanResultsPopover) {
-          const scanRect = scanResultsPopover.getBoundingClientRect();
-          const left = scanRect.right + gap;
-          const top = scanRect.top;
-          const maxLeft = window.innerWidth - popoverSize2.width - padding;
-          const adjustedLeft = Math.min(left, maxLeft);
-          const adjustedTop = Math.max(padding, top);
-          setPosition({ top: adjustedTop, left: adjustedLeft });
-        } else {
-          const top = padding;
-          const left = Math.max(
-            padding,
-            window.innerWidth - popoverSize2.width - padding
-          );
-          setPosition({ top, left });
-        }
-        return;
-      }
-      const rect = inspectedElement.element.getBoundingClientRect();
-      const measured = popoverRef.current ? {
-        width: popoverRef.current.offsetWidth,
-        height: popoverRef.current.offsetHeight
-      } : null;
-      const popoverSize = measured ?? {
-        width: POPOVER_WIDTH,
-        height: POPOVER_MAX_HEIGHT
-      };
-      const next = computeInspectionPanelPosition({
-        rect,
-        popover: popoverSize,
-        viewport: { width: window.innerWidth, height: window.innerHeight },
-        padding: 12
-      });
-      setPosition({ top: next.top, left: next.left });
-    };
-    const schedule = () => {
-      if (rafId != null) return;
-      rafId = window.requestAnimationFrame(update);
-    };
-    schedule();
-    if (isFileLevelIssue) {
-      window.addEventListener("resize", schedule);
-    } else {
-      window.addEventListener("scroll", schedule, true);
-      window.addEventListener("resize", schedule);
-    }
-    return () => {
-      if (rafId != null) window.cancelAnimationFrame(rafId);
-      if (isFileLevelIssue) {
-        window.removeEventListener("resize", schedule);
-      } else {
-        window.removeEventListener("scroll", schedule, true);
-        window.removeEventListener("resize", schedule);
-      }
-    };
-  }, [inspectedElement, showFullContext, isFileLevelIssue]);
-  const handleOpenInCursor = useCallback(() => {
-    if (!inspectedElement) return;
-    const url = buildEditorUrl(
-      inspectedElement.source,
-      "cursor",
-      editorBaseDir
-    );
-    window.open(url, "_blank");
-  }, [inspectedElement, editorBaseDir]);
-  const handleUILintInteraction = useCallback(
-    (e) => {
-      e.stopPropagation();
-    },
-    []
-  );
-  if (!mounted || !inspectedElement) return null;
-  const content = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: popoverRef,
-      "data-ui-lint": true,
-      onMouseDown: handleUILintInteraction,
-      onPointerDown: handleUILintInteraction,
-      onClick: handleUILintInteraction,
-      onKeyDown: handleUILintInteraction,
-      style: {
-        position: "fixed",
-        top: position.top,
-        left: position.left,
-        width: POPOVER_WIDTH,
-        maxHeight: POPOVER_MAX_HEIGHT,
-        backgroundColor: STYLES.bg,
-        backdropFilter: STYLES.blur,
-        WebkitBackdropFilter: STYLES.blur,
-        border: `1px solid ${STYLES.border}`,
-        borderRadius: "12px",
-        boxShadow: STYLES.shadow,
-        fontFamily: STYLES.font,
-        color: STYLES.text,
-        overflow: "hidden",
-        zIndex: 99998,
-        animation: "uilint-popover-appear 0.15s ease-out",
-        pointerEvents: "auto"
-        // Ensure panel is interactive
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes uilint-popover-appear {
-          from { opacity: 0; transform: scale(0.95); }
-          to { opacity: 1; transform: scale(1); }
-        }
-        @keyframes uilint-spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      ` }),
-        /* @__PURE__ */ jsx(
-          PopoverHeader,
-          {
-            element: inspectedElement,
-            issueCount: eslintIssues.length,
-            lineRange,
-            onClose: () => setInspectedElement(null)
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              maxHeight: POPOVER_MAX_HEIGHT - 120,
-              overflowY: "auto"
-            },
-            children: [
-              cachedIssue?.status === "scanning" && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    padding: "32px",
-                    gap: "12px"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: "20px",
-                          height: "20px",
-                          border: `2px solid ${STYLES.border}`,
-                          borderTopColor: STYLES.accent,
-                          borderRadius: "50%",
-                          animation: "uilint-spin 0.8s linear infinite"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { style: { color: STYLES.textMuted, fontSize: "13px" }, children: "Scanning..." })
-                  ]
-                }
-              ),
-              cachedIssue?.status === "complete" && eslintIssues.length === 0 && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    padding: "32px",
-                    gap: "8px",
-                    color: STYLES.success,
-                    fontSize: "13px"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(CheckIcon, {}),
-                    "No issues found"
-                  ]
-                }
-              ),
-              cachedIssue?.status === "complete" && eslintIssues.length > 0 && /* @__PURE__ */ jsx(
-                IssuesList,
-                {
-                  issues: eslintIssues,
-                  source: inspectedElement.source,
-                  showFullContext
-                }
-              ),
-              !cachedIssue && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    padding: "24px 16px",
-                    textAlign: "center",
-                    color: STYLES.textMuted,
-                    fontSize: "12px"
-                  },
-                  children: "Enable live scanning to analyze this element"
-                }
-              )
-            ]
-          }
-        ),
-        cachedIssue?.status === "complete" && eslintIssues.length > 0 && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "10px 14px",
-              borderTop: `1px solid ${STYLES.border}`,
-              backgroundColor: STYLES.bgSurface
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => setShowFullContext(!showFullContext),
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "6px",
-                    padding: "5px 10px",
-                    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.bg;
-                    e.currentTarget.style.color = STYLES.text;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.color = STYLES.textMuted;
-                  },
-                  children: [
-                    showFullContext ? /* @__PURE__ */ jsx(CollapseIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {}),
-                    showFullContext ? "Hide context" : "Show full context"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: handleOpenInCursor,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "5px 10px",
-                    borderRadius: "6px",
-                    border: "none",
-                    backgroundColor: STYLES.accent,
-                    color: "#FFFFFF",
-                    fontSize: "11px",
-                    fontWeight: 500,
-                    cursor: "pointer",
-                    transition: "background-color 0.15s"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.backgroundColor = STYLES.accentHover;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = STYLES.accent;
-                  },
-                  title: "Open in Cursor",
-                  children: [
-                    /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
-                    "Open in Cursor"
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-  return createPortal(content, document.body);
-}
-function PopoverHeader({
-  element,
-  issueCount,
-  lineRange,
-  onClose
-}) {
-  const fileName = element.source.fileName.split("/").pop() || "Unknown";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "12px 14px",
-        borderBottom: `1px solid ${STYLES.border}`,
-        backgroundColor: STYLES.bgSurface
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "6px",
-                fontSize: "13px",
-                fontWeight: 600
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { style: { fontFamily: STYLES.fontMono }, children: fileName }),
-                /* @__PURE__ */ jsxs("span", { style: { color: STYLES.textDim, fontWeight: 400 }, children: [
-                  ":",
-                  lineRange
-                ] })
-              ]
-            }
-          ),
-          issueCount > 0 && /* @__PURE__ */ jsx(Badge, { count: issueCount, backgroundColor: STYLES.error })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onClose,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "26px",
-              height: "26px",
-              borderRadius: "6px",
-              border: "none",
-              backgroundColor: "transparent",
-              color: STYLES.textMuted,
-              cursor: "pointer",
-              transition: "all 0.15s"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = STYLES.bg;
-              e.currentTarget.style.color = STYLES.text;
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = STYLES.textMuted;
-            },
-            children: /* @__PURE__ */ jsx(CloseIcon, {})
-          }
-        )
-      ]
-    }
-  );
-}
-function IssuesList({
-  issues,
-  source,
-  showFullContext
-}) {
-  const issuesByLine = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    issues.forEach((issue) => {
-      const existing = map.get(issue.line) || [];
-      existing.push(issue);
-      map.set(issue.line, existing);
-    });
-    return map;
-  }, [issues]);
-  const sortedLines = useMemo(
-    () => Array.from(issuesByLine.keys()).sort((a, b) => a - b),
-    [issuesByLine]
-  );
-  return /* @__PURE__ */ jsx("div", { style: { padding: "12px" }, children: sortedLines.map((lineNumber, index) => /* @__PURE__ */ jsx(
-    CodeBlockWithAnnotations,
-    {
-      lineNumber,
-      issues: issuesByLine.get(lineNumber),
-      source,
-      showFullContext,
-      isLast: index === sortedLines.length - 1
-    },
-    lineNumber
-  )) });
-}
-function CodeBlockWithAnnotations({
-  lineNumber,
-  issues,
-  source,
-  showFullContext,
-  isLast
-}) {
-  const [codeData, setCodeData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const contextLines = showFullContext ? 5 : 0;
-  useEffect(() => {
-    const issueSource = {
-      fileName: source.fileName,
-      lineNumber,
-      columnNumber: issues[0]?.column || 0
-    };
-    setLoading(true);
-    fetchSourceWithWindow(issueSource, {
-      linesAbove: contextLines,
-      linesBelow: contextLines
-    }).then((data) => {
-      if (data) {
-        setCodeData({
-          lines: data.lines,
-          startLine: data.startLine,
-          highlightLine: data.highlightLine
-        });
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-  }, [source.fileName, lineNumber, issues, contextLines]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        marginBottom: isLast ? 0 : "12px",
-        backgroundColor: STYLES.bg,
-        borderRadius: "8px",
-        overflow: "hidden",
-        border: `1px solid ${STYLES.border}`
-      },
-      children: loading ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            textAlign: "center",
-            color: STYLES.textDim,
-            fontSize: "11px"
-          },
-          children: "Loading..."
-        }
-      ) : codeData ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-        "pre",
-        {
-          style: {
-            margin: 0,
-            padding: "8px 0",
-            overflow: "auto",
-            fontSize: "11px",
-            lineHeight: "1.5",
-            fontFamily: STYLES.fontMono
-          },
-          children: dedentLines(codeData.lines).lines.map((line, index) => {
-            const currentLineNumber = codeData.startLine + index;
-            const isHighlight = currentLineNumber === codeData.highlightLine;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    backgroundColor: isHighlight ? "rgba(239, 68, 68, 0.1)" : "transparent",
-                    borderLeft: isHighlight ? `2px solid ${STYLES.error}` : "2px solid transparent"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          display: "inline-block",
-                          width: "36px",
-                          paddingRight: "8px",
-                          paddingLeft: "8px",
-                          textAlign: "right",
-                          color: isHighlight ? STYLES.error : STYLES.textDim,
-                          userSelect: "none",
-                          flexShrink: 0
-                        },
-                        children: currentLineNumber
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "code",
-                      {
-                        style: {
-                          color: isHighlight ? STYLES.text : STYLES.textMuted,
-                          whiteSpace: "pre",
-                          paddingRight: "8px"
-                        },
-                        children: line || " "
-                      }
-                    )
-                  ]
-                }
-              ),
-              isHighlight && issues.map((issue, issueIndex) => /* @__PURE__ */ jsx(InlineAnnotation, { issue }, issueIndex))
-            ] }, currentLineNumber);
-          })
-        }
-      ) }) : /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            padding: "12px",
-            textAlign: "center",
-            color: STYLES.textDim,
-            fontSize: "11px"
-          },
-          children: "Could not load source"
-        }
-      )
-    }
-  );
-}
-function InlineAnnotation({ issue }) {
-  const ruleUrl = issue.ruleId ? `https://github.com/peter-suggate/uilint/blob/main/packages/uilint-eslint/src/rules/${issue.ruleId.split("/").pop()}.ts` : null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "flex-start",
-        gap: "8px",
-        padding: "6px 8px 6px 46px",
-        backgroundColor: "rgba(239, 68, 68, 0.08)",
-        borderLeft: `2px solid ${STYLES.error}`
-      },
-      children: [
-        /* @__PURE__ */ jsx(ErrorSquiggleIcon, {}),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, fontSize: "11px", lineHeight: "1.4" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { color: STYLES.text }, children: issue.message }),
-          issue.ruleId && /* @__PURE__ */ jsxs(Fragment, { children: [
-            " ",
-            /* @__PURE__ */ jsxs(
-              "a",
-              {
-                href: ruleUrl || "#",
-                target: "_blank",
-                rel: "noopener noreferrer",
-                style: {
-                  color: STYLES.textDim,
-                  textDecoration: "none",
-                  fontFamily: STYLES.fontMono,
-                  fontSize: "10px",
-                  transition: "color 0.15s"
-                },
-                onMouseEnter: (e) => {
-                  e.currentTarget.style.color = STYLES.accent;
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.color = STYLES.textDim;
-                },
-                children: [
-                  "(",
-                  issue.ruleId,
-                  ")"
-                ]
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M20 6L9 17l-5-5",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function ExternalLinkIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function CloseIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M18 6L6 18M6 6l12 12",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function ErrorSquiggleIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      style: { flexShrink: 0, marginTop: "1px" },
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z",
-          stroke: STYLES.error,
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
-function ExpandIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-function CollapseIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M4 14h6m0 0v6m0-6l-7 7m17-11h-6m0 0V4m0 6l7-7",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-
-export {
-  InspectionPanel
-};