uilint-react 0.1.43 → 0.1.44

package/dist/chunk-X4PRYONL.js

@@ -0,0 +1,1017 @@
+"use client";
+import {
+  Badge
+} from "./chunk-W42PI2OF.js";
+import {
+  buildEditorUrl,
+  useUILintContext,
+  useUILintStore
+} from "./chunk-HECINZHM.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/source-fetcher.ts
+var sourceCache = /* @__PURE__ */ new Map();
+var CACHE_TTL = 5 * 60 * 1e3;
+var API_ENDPOINT = "/api/.uilint/source";
+async function fetchSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
+    return {
+      content: cached.content,
+      relativePath: cached.relativePath
+    };
+  }
+  try {
+    const response = await fetch(
+      `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
+    );
+    if (!response.ok) {
+      console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
+      return null;
+    }
+    const data = await response.json();
+    sourceCache.set(filePath, {
+      ...data,
+      fetchedAt: Date.now()
+    });
+    return data;
+  } catch (error) {
+    console.error("[UILint] Error fetching source:", error);
+    return null;
+  }
+}
+async function fetchSourceWithContext(source, contextLines = 5) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - contextLines);
+  const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+async function fetchSourceWithWindow(source, window2) {
+  const result = await fetchSource(source.fileName);
+  if (!result) return null;
+  const allLines = result.content.split("\n");
+  const targetLine = source.lineNumber - 1;
+  const startLine = Math.max(0, targetLine - Math.max(0, window2.linesAbove));
+  const endLine = Math.min(
+    allLines.length,
+    targetLine + Math.max(0, window2.linesBelow) + 1
+  );
+  return {
+    lines: allLines.slice(startLine, endLine),
+    startLine: startLine + 1,
+    // Back to 1-indexed
+    highlightLine: source.lineNumber,
+    relativePath: result.relativePath
+  };
+}
+function clearSourceCache() {
+  sourceCache.clear();
+}
+function getCachedSource(filePath) {
+  const cached = sourceCache.get(filePath);
+  if (!cached) return null;
+  if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
+    sourceCache.delete(filePath);
+    return null;
+  }
+  return {
+    content: cached.content,
+    relativePath: cached.relativePath
+  };
+}
+async function prefetchSources(filePaths) {
+  const uniquePaths = [...new Set(filePaths)].filter((path) => {
+    const cached = sourceCache.get(path);
+    return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
+  });
+  const BATCH_SIZE = 5;
+  for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
+    const batch = uniquePaths.slice(i, i + BATCH_SIZE);
+    await Promise.all(batch.map(fetchSource));
+  }
+}
+
+// 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 = 380;
+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);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [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]);
+  if (!mounted || !inspectedElement) return null;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popoverRef,
+      "data-ui-lint": true,
+      onClick: (e) => e.stopPropagation(),
+      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"
+      },
+      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 {
+  fetchSource,
+  fetchSourceWithContext,
+  clearSourceCache,
+  getCachedSource,
+  prefetchSources,
+  InspectionPanel
+};