uilint-react 0.1.38 → 0.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,908 +0,0 @@
1
- "use client";
2
- import {
3
- buildEditorUrl,
4
- useUILintContext
5
- } from "./chunk-PU6XPNPN.js";
6
-
7
- // src/components/ui-lint/InspectionPanel.tsx
8
- import { useState, useEffect, useCallback, useMemo } from "react";
9
- import { createPortal } from "react-dom";
10
-
11
- // src/components/ui-lint/source-fetcher.ts
12
- var sourceCache = /* @__PURE__ */ new Map();
13
- var CACHE_TTL = 5 * 60 * 1e3;
14
- var API_ENDPOINT = "/api/.uilint/source";
15
- async function fetchSource(filePath) {
16
- const cached = sourceCache.get(filePath);
17
- if (cached && Date.now() - cached.fetchedAt < CACHE_TTL) {
18
- return {
19
- content: cached.content,
20
- relativePath: cached.relativePath
21
- };
22
- }
23
- try {
24
- const response = await fetch(
25
- `${API_ENDPOINT}?path=${encodeURIComponent(filePath)}`
26
- );
27
- if (!response.ok) {
28
- console.warn(`[UILint] Failed to fetch source: ${response.statusText}`);
29
- return null;
30
- }
31
- const data = await response.json();
32
- sourceCache.set(filePath, {
33
- ...data,
34
- fetchedAt: Date.now()
35
- });
36
- return data;
37
- } catch (error) {
38
- console.error("[UILint] Error fetching source:", error);
39
- return null;
40
- }
41
- }
42
- async function fetchSourceWithContext(source, contextLines = 5) {
43
- const result = await fetchSource(source.fileName);
44
- if (!result) return null;
45
- const allLines = result.content.split("\n");
46
- const targetLine = source.lineNumber - 1;
47
- const startLine = Math.max(0, targetLine - contextLines);
48
- const endLine = Math.min(allLines.length, targetLine + contextLines + 1);
49
- return {
50
- lines: allLines.slice(startLine, endLine),
51
- startLine: startLine + 1,
52
- // Back to 1-indexed
53
- highlightLine: source.lineNumber,
54
- relativePath: result.relativePath
55
- };
56
- }
57
- function clearSourceCache() {
58
- sourceCache.clear();
59
- }
60
- function getCachedSource(filePath) {
61
- const cached = sourceCache.get(filePath);
62
- if (!cached) return null;
63
- if (Date.now() - cached.fetchedAt >= CACHE_TTL) {
64
- sourceCache.delete(filePath);
65
- return null;
66
- }
67
- return {
68
- content: cached.content,
69
- relativePath: cached.relativePath
70
- };
71
- }
72
- async function prefetchSources(filePaths) {
73
- const uniquePaths = [...new Set(filePaths)].filter((path) => {
74
- const cached = sourceCache.get(path);
75
- return !cached || Date.now() - cached.fetchedAt >= CACHE_TTL;
76
- });
77
- const BATCH_SIZE = 5;
78
- for (let i = 0; i < uniquePaths.length; i += BATCH_SIZE) {
79
- const batch = uniquePaths.slice(i, i + BATCH_SIZE);
80
- await Promise.all(batch.map(fetchSource));
81
- }
82
- }
83
-
84
- // src/components/ui-lint/InspectionPanel.tsx
85
- import { jsx, jsxs } from "react/jsx-runtime";
86
- var STYLES = {
87
- bg: "rgba(17, 24, 39, 0.95)",
88
- bgSurface: "rgba(31, 41, 55, 0.9)",
89
- border: "rgba(75, 85, 99, 0.5)",
90
- text: "#F9FAFB",
91
- textMuted: "#9CA3AF",
92
- textDim: "#6B7280",
93
- accent: "#3B82F6",
94
- accentHover: "#2563EB",
95
- success: "#10B981",
96
- warning: "#F59E0B",
97
- shadow: "0 -8px 32px rgba(0, 0, 0, 0.4)",
98
- blur: "blur(16px)",
99
- font: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
100
- fontMono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
101
- };
102
- var PANEL_WIDTH = 420;
103
- function InspectionPanel() {
104
- const { inspectedElement, setInspectedElement } = useUILintContext();
105
- const [mounted, setMounted] = useState(false);
106
- const [activeTab, setActiveTab] = useState("info");
107
- useEffect(() => {
108
- setMounted(true);
109
- }, []);
110
- if (!mounted || !inspectedElement) return null;
111
- const content = /* @__PURE__ */ jsxs(
112
- "div",
113
- {
114
- "data-ui-lint": true,
115
- style: {
116
- position: "fixed",
117
- top: 0,
118
- right: 0,
119
- bottom: 0,
120
- width: PANEL_WIDTH,
121
- backgroundColor: STYLES.bg,
122
- backdropFilter: STYLES.blur,
123
- WebkitBackdropFilter: STYLES.blur,
124
- borderLeft: `1px solid ${STYLES.border}`,
125
- boxShadow: STYLES.shadow,
126
- fontFamily: STYLES.font,
127
- color: STYLES.text,
128
- overflow: "hidden",
129
- zIndex: 99998
130
- },
131
- children: [
132
- /* @__PURE__ */ jsx("style", { children: `
133
- @keyframes uilint-panel-slide-in {
134
- from { transform: translateX(100%); }
135
- to { transform: translateX(0); }
136
- }
137
- @keyframes uilint-spin {
138
- from { transform: rotate(0deg); }
139
- to { transform: rotate(360deg); }
140
- }
141
- ` }),
142
- /* @__PURE__ */ jsxs(
143
- "div",
144
- {
145
- style: {
146
- display: "flex",
147
- flexDirection: "column",
148
- height: "100%",
149
- animation: "uilint-panel-slide-in 0.2s ease-out"
150
- },
151
- children: [
152
- /* @__PURE__ */ jsx(
153
- PanelHeader,
154
- {
155
- element: inspectedElement,
156
- onClose: () => setInspectedElement(null)
157
- }
158
- ),
159
- /* @__PURE__ */ jsxs(
160
- "div",
161
- {
162
- style: {
163
- display: "flex",
164
- borderBottom: `1px solid ${STYLES.border}`
165
- },
166
- children: [
167
- /* @__PURE__ */ jsx(
168
- TabButton,
169
- {
170
- label: "Inspect",
171
- active: activeTab === "info",
172
- onClick: () => setActiveTab("info")
173
- }
174
- ),
175
- /* @__PURE__ */ jsx(
176
- TabButton,
177
- {
178
- label: "Source",
179
- active: activeTab === "source",
180
- onClick: () => setActiveTab("source")
181
- }
182
- )
183
- ]
184
- }
185
- ),
186
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto" }, children: [
187
- activeTab === "info" && /* @__PURE__ */ jsx(InfoTab, { element: inspectedElement }),
188
- activeTab === "source" && /* @__PURE__ */ jsx(SourceTab, { element: inspectedElement })
189
- ] })
190
- ]
191
- }
192
- )
193
- ]
194
- }
195
- );
196
- return createPortal(content, document.body);
197
- }
198
- function PanelHeader({
199
- element,
200
- onClose
201
- }) {
202
- const tagName = element.element.tagName.toLowerCase();
203
- const handleOpenInCursor = useCallback(() => {
204
- if (element.source) {
205
- const url = buildEditorUrl(element.source, "cursor");
206
- window.open(url, "_blank");
207
- }
208
- }, [element.source]);
209
- return /* @__PURE__ */ jsxs(
210
- "div",
211
- {
212
- style: {
213
- display: "flex",
214
- alignItems: "center",
215
- justifyContent: "space-between",
216
- padding: "12px 16px",
217
- borderBottom: `1px solid ${STYLES.border}`,
218
- backgroundColor: STYLES.bgSurface
219
- },
220
- children: [
221
- /* @__PURE__ */ jsxs("div", { children: [
222
- /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px", fontWeight: 600 }, children: [
223
- "<",
224
- tagName,
225
- ">"
226
- ] }),
227
- element.source && /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: [
228
- element.source.fileName.split("/").pop(),
229
- ":",
230
- element.source.lineNumber
231
- ] })
232
- ] }),
233
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
234
- element.source && /* @__PURE__ */ jsxs(
235
- "button",
236
- {
237
- onClick: handleOpenInCursor,
238
- style: {
239
- display: "flex",
240
- alignItems: "center",
241
- gap: "4px",
242
- padding: "6px 10px",
243
- borderRadius: "6px",
244
- border: "none",
245
- backgroundColor: STYLES.accent,
246
- color: "#FFFFFF",
247
- fontSize: "11px",
248
- fontWeight: 500,
249
- cursor: "pointer",
250
- transition: "background-color 0.15s"
251
- },
252
- onMouseEnter: (e) => {
253
- e.currentTarget.style.backgroundColor = STYLES.accentHover;
254
- },
255
- onMouseLeave: (e) => {
256
- e.currentTarget.style.backgroundColor = STYLES.accent;
257
- },
258
- title: "Open in Cursor",
259
- children: [
260
- /* @__PURE__ */ jsx(CursorIcon, {}),
261
- "Open in Cursor"
262
- ]
263
- }
264
- ),
265
- /* @__PURE__ */ jsx(
266
- "button",
267
- {
268
- onClick: onClose,
269
- style: {
270
- display: "flex",
271
- alignItems: "center",
272
- justifyContent: "center",
273
- width: "28px",
274
- height: "28px",
275
- borderRadius: "6px",
276
- border: "none",
277
- backgroundColor: "transparent",
278
- color: STYLES.textMuted,
279
- cursor: "pointer",
280
- transition: "all 0.15s"
281
- },
282
- onMouseEnter: (e) => {
283
- e.currentTarget.style.backgroundColor = STYLES.bgSurface;
284
- e.currentTarget.style.color = STYLES.text;
285
- },
286
- onMouseLeave: (e) => {
287
- e.currentTarget.style.backgroundColor = "transparent";
288
- e.currentTarget.style.color = STYLES.textMuted;
289
- },
290
- children: /* @__PURE__ */ jsx(CloseIcon, {})
291
- }
292
- )
293
- ] })
294
- ]
295
- }
296
- );
297
- }
298
- function TabButton({
299
- label,
300
- active,
301
- onClick
302
- }) {
303
- return /* @__PURE__ */ jsx(
304
- "button",
305
- {
306
- onClick,
307
- style: {
308
- flex: 1,
309
- padding: "10px 16px",
310
- border: "none",
311
- backgroundColor: "transparent",
312
- color: active ? STYLES.accent : STYLES.textMuted,
313
- fontSize: "12px",
314
- fontWeight: 500,
315
- cursor: "pointer",
316
- borderBottom: active ? `2px solid ${STYLES.accent}` : "2px solid transparent",
317
- marginBottom: "-1px",
318
- transition: "all 0.15s"
319
- },
320
- children: label
321
- }
322
- );
323
- }
324
- function InfoTab({ element }) {
325
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
326
- /* @__PURE__ */ jsx(ScanSection, { element }),
327
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
328
- /* @__PURE__ */ jsxs(Section, { title: "Element", children: [
329
- /* @__PURE__ */ jsx(
330
- InfoRow,
331
- {
332
- label: "Tag",
333
- value: `<${element.element.tagName.toLowerCase()}>`
334
- }
335
- ),
336
- element.element.className && /* @__PURE__ */ jsx(
337
- InfoRow,
338
- {
339
- label: "Classes",
340
- value: typeof element.element.className === "string" ? element.element.className : "",
341
- mono: true
342
- }
343
- ),
344
- element.source && /* @__PURE__ */ jsx(
345
- InfoRow,
346
- {
347
- label: "Location",
348
- value: `Line ${element.source.lineNumber}${element.source.columnNumber ? `, Col ${element.source.columnNumber}` : ""}`
349
- }
350
- )
351
- ] }),
352
- element.source && /* @__PURE__ */ jsx(Section, { title: "Source File", children: /* @__PURE__ */ jsx(
353
- "div",
354
- {
355
- style: {
356
- fontSize: "11px",
357
- color: STYLES.textDim,
358
- fontFamily: STYLES.fontMono,
359
- wordBreak: "break-all"
360
- },
361
- children: element.source.fileName
362
- }
363
- ) }),
364
- /* @__PURE__ */ jsxs(Section, { title: "Dimensions", children: [
365
- /* @__PURE__ */ jsx(
366
- InfoRow,
367
- {
368
- label: "Size",
369
- value: `${Math.round(element.rect.width)} \xD7 ${Math.round(
370
- element.rect.height
371
- )}px`
372
- }
373
- ),
374
- /* @__PURE__ */ jsx(
375
- InfoRow,
376
- {
377
- label: "Position",
378
- value: `(${Math.round(element.rect.left)}, ${Math.round(
379
- element.rect.top
380
- )})`
381
- }
382
- )
383
- ] })
384
- ] })
385
- ] });
386
- }
387
- function SourceTab({ element }) {
388
- const [sourceData, setSourceData] = useState(null);
389
- const [loading, setLoading] = useState(false);
390
- const [error, setError] = useState(null);
391
- useEffect(() => {
392
- if (!element.source) {
393
- setError("No source information available");
394
- return;
395
- }
396
- setLoading(true);
397
- setError(null);
398
- fetchSourceWithContext(element.source, 8).then((data) => {
399
- if (data) {
400
- setSourceData(data);
401
- } else {
402
- setError("Failed to load source file");
403
- }
404
- }).catch(() => {
405
- setError("Failed to load source file");
406
- }).finally(() => {
407
- setLoading(false);
408
- });
409
- }, [element.source]);
410
- if (loading) {
411
- return /* @__PURE__ */ jsx(
412
- "div",
413
- {
414
- style: {
415
- display: "flex",
416
- alignItems: "center",
417
- justifyContent: "center",
418
- padding: "48px",
419
- color: STYLES.textMuted,
420
- fontSize: "13px"
421
- },
422
- children: "Loading source..."
423
- }
424
- );
425
- }
426
- if (error) {
427
- return /* @__PURE__ */ jsx(
428
- "div",
429
- {
430
- style: {
431
- display: "flex",
432
- alignItems: "center",
433
- justifyContent: "center",
434
- padding: "48px",
435
- color: STYLES.textMuted,
436
- fontSize: "13px"
437
- },
438
- children: error
439
- }
440
- );
441
- }
442
- if (!sourceData) return null;
443
- return /* @__PURE__ */ jsxs("div", { style: { padding: "12px" }, children: [
444
- /* @__PURE__ */ jsx(
445
- "div",
446
- {
447
- style: {
448
- padding: "8px 12px",
449
- marginBottom: "8px",
450
- backgroundColor: STYLES.bgSurface,
451
- borderRadius: "6px",
452
- fontSize: "11px",
453
- fontFamily: STYLES.fontMono,
454
- color: STYLES.textMuted,
455
- wordBreak: "break-all"
456
- },
457
- children: sourceData.relativePath
458
- }
459
- ),
460
- /* @__PURE__ */ jsx(
461
- "div",
462
- {
463
- style: {
464
- backgroundColor: STYLES.bgSurface,
465
- borderRadius: "8px",
466
- overflow: "hidden",
467
- border: `1px solid ${STYLES.border}`
468
- },
469
- children: /* @__PURE__ */ jsx(
470
- "pre",
471
- {
472
- style: {
473
- margin: 0,
474
- padding: "12px 0",
475
- overflow: "auto",
476
- fontSize: "12px",
477
- lineHeight: "1.6",
478
- fontFamily: STYLES.fontMono
479
- },
480
- children: sourceData.lines.map((line, index) => {
481
- const lineNumber = sourceData.startLine + index;
482
- const isHighlight = lineNumber === sourceData.highlightLine;
483
- return /* @__PURE__ */ jsxs(
484
- "div",
485
- {
486
- style: {
487
- display: "flex",
488
- backgroundColor: isHighlight ? "rgba(59, 130, 246, 0.2)" : "transparent",
489
- borderLeft: isHighlight ? `3px solid ${STYLES.accent}` : "3px solid transparent"
490
- },
491
- children: [
492
- /* @__PURE__ */ jsx(
493
- "span",
494
- {
495
- style: {
496
- display: "inline-block",
497
- width: "48px",
498
- paddingRight: "12px",
499
- textAlign: "right",
500
- color: isHighlight ? STYLES.accent : STYLES.textDim,
501
- userSelect: "none",
502
- flexShrink: 0
503
- },
504
- children: lineNumber
505
- }
506
- ),
507
- /* @__PURE__ */ jsx(
508
- "code",
509
- {
510
- style: {
511
- color: isHighlight ? STYLES.text : STYLES.textMuted,
512
- whiteSpace: "pre"
513
- },
514
- children: line || " "
515
- }
516
- )
517
- ]
518
- },
519
- lineNumber
520
- );
521
- })
522
- }
523
- )
524
- }
525
- )
526
- ] });
527
- }
528
- function ScanSection({ element }) {
529
- const { elementIssuesCache, autoScanState } = useUILintContext();
530
- const cachedIssue = useMemo(() => {
531
- if (element.scannedElementId) {
532
- const cached = elementIssuesCache.get(element.scannedElementId);
533
- if (cached) return cached;
534
- }
535
- if (element.source) {
536
- for (const [, issue] of elementIssuesCache) {
537
- const scannedElement = autoScanState.elements.find(
538
- (el) => el.id === issue.elementId
539
- );
540
- if (scannedElement?.source?.fileName === element.source.fileName) {
541
- return issue;
542
- }
543
- }
544
- }
545
- return null;
546
- }, [
547
- element.scannedElementId,
548
- element.source,
549
- elementIssuesCache,
550
- autoScanState.elements
551
- ]);
552
- const eslintIssues = useMemo(() => {
553
- return cachedIssue?.issues || [];
554
- }, [cachedIssue]);
555
- const showCachedScanning = cachedIssue?.status === "scanning";
556
- const showCachedPending = cachedIssue?.status === "pending";
557
- const showCachedError = cachedIssue?.status === "error";
558
- const showCachedResult = cachedIssue?.status === "complete";
559
- const showNoScan = !cachedIssue;
560
- return /* @__PURE__ */ jsx(
561
- "div",
562
- {
563
- style: {
564
- borderBottom: `1px solid ${STYLES.border}`,
565
- backgroundColor: STYLES.bgSurface
566
- },
567
- children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
568
- showCachedScanning && /* @__PURE__ */ jsxs(
569
- "div",
570
- {
571
- style: {
572
- display: "flex",
573
- flexDirection: "column",
574
- alignItems: "center",
575
- justifyContent: "center",
576
- padding: "32px 24px",
577
- gap: "12px"
578
- },
579
- children: [
580
- /* @__PURE__ */ jsx(
581
- "div",
582
- {
583
- style: {
584
- width: "32px",
585
- height: "32px",
586
- border: `3px solid ${STYLES.border}`,
587
- borderTopColor: STYLES.success,
588
- borderRadius: "50%",
589
- animation: "uilint-spin 1s linear infinite"
590
- }
591
- }
592
- ),
593
- /* @__PURE__ */ jsx("div", { style: { color: STYLES.textMuted, fontSize: "13px" }, children: "Auto-scan in progress..." })
594
- ]
595
- }
596
- ),
597
- showCachedPending && /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: "16px 0" }, children: /* @__PURE__ */ jsxs(
598
- "div",
599
- {
600
- style: {
601
- display: "inline-flex",
602
- alignItems: "center",
603
- gap: "8px",
604
- padding: "10px 20px",
605
- borderRadius: "8px",
606
- backgroundColor: STYLES.bg,
607
- color: STYLES.textMuted,
608
- fontSize: "12px"
609
- },
610
- children: [
611
- /* @__PURE__ */ jsx(
612
- "div",
613
- {
614
- style: {
615
- width: "8px",
616
- height: "8px",
617
- borderRadius: "50%",
618
- backgroundColor: "rgba(156, 163, 175, 0.5)"
619
- }
620
- }
621
- ),
622
- "Waiting in scan queue..."
623
- ]
624
- }
625
- ) }),
626
- showCachedError && /* @__PURE__ */ jsx(
627
- "div",
628
- {
629
- style: {
630
- padding: "12px",
631
- backgroundColor: "rgba(239, 68, 68, 0.1)",
632
- border: "1px solid rgba(239, 68, 68, 0.3)",
633
- borderRadius: "8px",
634
- color: "#EF4444",
635
- fontSize: "12px"
636
- },
637
- children: "Auto-scan failed for this element"
638
- }
639
- ),
640
- showCachedResult && /* @__PURE__ */ jsxs("div", { children: [
641
- eslintIssues.length > 0 && /* @__PURE__ */ jsx(ESLintIssuesSection, { issues: eslintIssues }),
642
- eslintIssues.length === 0 && /* @__PURE__ */ jsx(
643
- "div",
644
- {
645
- style: {
646
- padding: "16px",
647
- textAlign: "center",
648
- color: STYLES.textMuted,
649
- fontSize: "12px"
650
- },
651
- children: "No issues found"
652
- }
653
- )
654
- ] }),
655
- showNoScan && /* @__PURE__ */ jsx(
656
- "div",
657
- {
658
- style: {
659
- padding: "16px",
660
- textAlign: "center",
661
- color: STYLES.textMuted,
662
- fontSize: "12px"
663
- },
664
- children: "Run auto-scan to analyze this element"
665
- }
666
- )
667
- ] })
668
- }
669
- );
670
- }
671
- function ESLintIssuesSection({ issues }) {
672
- if (issues.length === 0) return null;
673
- return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
674
- /* @__PURE__ */ jsxs(
675
- "div",
676
- {
677
- style: {
678
- display: "flex",
679
- alignItems: "center",
680
- gap: "8px",
681
- marginBottom: "8px"
682
- },
683
- children: [
684
- /* @__PURE__ */ jsx(ESLintIcon, {}),
685
- /* @__PURE__ */ jsxs(
686
- "span",
687
- {
688
- style: {
689
- fontSize: "12px",
690
- fontWeight: 600,
691
- color: STYLES.text
692
- },
693
- children: [
694
- "ESLint Issues (",
695
- issues.length,
696
- ")"
697
- ]
698
- }
699
- )
700
- ]
701
- }
702
- ),
703
- /* @__PURE__ */ jsx(
704
- "div",
705
- {
706
- style: {
707
- display: "flex",
708
- flexDirection: "column",
709
- gap: "6px"
710
- },
711
- children: issues.map((issue, index) => /* @__PURE__ */ jsx(
712
- "div",
713
- {
714
- style: {
715
- padding: "10px 12px",
716
- backgroundColor: "rgba(239, 68, 68, 0.1)",
717
- border: "1px solid rgba(239, 68, 68, 0.2)",
718
- borderRadius: "6px"
719
- },
720
- children: /* @__PURE__ */ jsxs(
721
- "div",
722
- {
723
- style: {
724
- display: "flex",
725
- alignItems: "flex-start",
726
- gap: "8px"
727
- },
728
- children: [
729
- /* @__PURE__ */ jsx(WarningIcon, {}),
730
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
731
- /* @__PURE__ */ jsx(
732
- "div",
733
- {
734
- style: {
735
- fontSize: "12px",
736
- color: STYLES.text,
737
- lineHeight: 1.4,
738
- marginBottom: "4px"
739
- },
740
- children: issue.message
741
- }
742
- ),
743
- /* @__PURE__ */ jsxs(
744
- "div",
745
- {
746
- style: {
747
- display: "flex",
748
- alignItems: "center",
749
- gap: "12px",
750
- fontSize: "10px",
751
- color: STYLES.textDim,
752
- fontFamily: STYLES.fontMono
753
- },
754
- children: [
755
- issue.ruleId && /* @__PURE__ */ jsx(
756
- "span",
757
- {
758
- style: {
759
- padding: "2px 6px",
760
- backgroundColor: "rgba(239, 68, 68, 0.15)",
761
- borderRadius: "4px",
762
- color: "#EF4444"
763
- },
764
- children: issue.ruleId
765
- }
766
- ),
767
- /* @__PURE__ */ jsxs("span", { children: [
768
- "Line ",
769
- issue.line,
770
- issue.column ? `:${issue.column}` : ""
771
- ] })
772
- ]
773
- }
774
- )
775
- ] })
776
- ]
777
- }
778
- )
779
- },
780
- index
781
- ))
782
- }
783
- )
784
- ] });
785
- }
786
- function Section({
787
- title,
788
- children
789
- }) {
790
- return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
791
- /* @__PURE__ */ jsx(
792
- "div",
793
- {
794
- style: {
795
- fontSize: "11px",
796
- fontWeight: 600,
797
- color: STYLES.textDim,
798
- textTransform: "uppercase",
799
- letterSpacing: "0.5px",
800
- marginBottom: "8px"
801
- },
802
- children: title
803
- }
804
- ),
805
- children
806
- ] });
807
- }
808
- function InfoRow({
809
- label,
810
- value,
811
- mono
812
- }) {
813
- return /* @__PURE__ */ jsxs(
814
- "div",
815
- {
816
- style: {
817
- display: "flex",
818
- justifyContent: "space-between",
819
- alignItems: "flex-start",
820
- fontSize: "12px",
821
- marginBottom: "4px"
822
- },
823
- children: [
824
- /* @__PURE__ */ jsx("span", { style: { color: STYLES.textMuted }, children: label }),
825
- /* @__PURE__ */ jsx(
826
- "span",
827
- {
828
- style: {
829
- color: STYLES.text,
830
- fontFamily: mono ? STYLES.fontMono : void 0,
831
- textAlign: "right",
832
- maxWidth: "200px",
833
- wordBreak: "break-word"
834
- },
835
- children: value
836
- }
837
- )
838
- ]
839
- }
840
- );
841
- }
842
- function CursorIcon() {
843
- return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
844
- "path",
845
- {
846
- d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",
847
- stroke: "currentColor",
848
- strokeWidth: "2",
849
- strokeLinecap: "round",
850
- strokeLinejoin: "round"
851
- }
852
- ) });
853
- }
854
- function CloseIcon() {
855
- return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
856
- "path",
857
- {
858
- d: "M18 6L6 18M6 6l12 12",
859
- stroke: "currentColor",
860
- strokeWidth: "2",
861
- strokeLinecap: "round",
862
- strokeLinejoin: "round"
863
- }
864
- ) });
865
- }
866
- function ESLintIcon() {
867
- return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
868
- "path",
869
- {
870
- d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
871
- stroke: "#EF4444",
872
- strokeWidth: "2",
873
- strokeLinecap: "round",
874
- strokeLinejoin: "round"
875
- }
876
- ) });
877
- }
878
- function WarningIcon() {
879
- return /* @__PURE__ */ jsx(
880
- "svg",
881
- {
882
- width: "14",
883
- height: "14",
884
- viewBox: "0 0 24 24",
885
- fill: "none",
886
- style: { flexShrink: 0, marginTop: "1px" },
887
- children: /* @__PURE__ */ jsx(
888
- "path",
889
- {
890
- 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",
891
- stroke: "#EF4444",
892
- strokeWidth: "2",
893
- strokeLinecap: "round",
894
- strokeLinejoin: "round"
895
- }
896
- )
897
- }
898
- );
899
- }
900
-
901
- export {
902
- fetchSource,
903
- fetchSourceWithContext,
904
- clearSourceCache,
905
- getCachedSource,
906
- prefetchSources,
907
- InspectionPanel
908
- };