uilint-react 0.1.37 → 0.1.39
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.
- package/dist/{ElementBadges-BASN6P5L.js → ElementBadges-3AFD2W4Z.js} +49 -18
- package/dist/{InspectionPanel-FY7QVWP5.js → InspectionPanel-VAHZBVVL.js} +2 -2
- package/dist/{LocatorOverlay-IUZV5OVI.js → LocatorOverlay-BEJYHU6S.js} +2 -2
- package/dist/{UILintToolbar-TM3DVGPO.js → UILintToolbar-4SH33QJU.js} +2 -2
- package/dist/chunk-4TLFW7LD.js +1143 -0
- package/dist/{chunk-LZX53CPI.js → chunk-7434TUMX.js} +23 -63
- package/dist/{chunk-DEHJKJNT.js → chunk-ILK73X6L.js} +285 -292
- package/dist/{chunk-ITKEGCAZ.js → chunk-NCNRCF5A.js} +9 -101
- package/dist/index.d.ts +43 -69
- package/dist/index.js +6 -12
- package/package.json +2 -2
- package/dist/chunk-EYWLUDXI.js +0 -695
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
useUILintContext
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-ILK73X6L.js";
|
|
5
5
|
|
|
6
6
|
// src/components/ui-lint/LocatorOverlay.tsx
|
|
7
7
|
import { useState, useEffect, useMemo } from "react";
|
|
8
8
|
import { createPortal } from "react-dom";
|
|
9
|
-
import {
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
var STYLES = {
|
|
11
11
|
bg: "rgba(17, 24, 39, 0.95)",
|
|
12
12
|
border: "rgba(59, 130, 246, 0.8)",
|
|
@@ -31,23 +31,14 @@ function LocatorOverlay() {
|
|
|
31
31
|
}, []);
|
|
32
32
|
const currentSource = useMemo(() => {
|
|
33
33
|
if (!locatorTarget) return null;
|
|
34
|
-
|
|
35
|
-
return locatorTarget.source;
|
|
36
|
-
}
|
|
37
|
-
const stackItem = locatorTarget.componentStack[locatorTarget.stackIndex - 1];
|
|
38
|
-
return stackItem?.source || null;
|
|
34
|
+
return locatorTarget.source;
|
|
39
35
|
}, [locatorTarget]);
|
|
40
36
|
const currentName = useMemo(() => {
|
|
41
37
|
if (!locatorTarget) return "";
|
|
42
|
-
|
|
43
|
-
return locatorTarget.element.tagName.toLowerCase();
|
|
44
|
-
}
|
|
45
|
-
const stackItem = locatorTarget.componentStack[locatorTarget.stackIndex - 1];
|
|
46
|
-
return stackItem?.name || "Unknown";
|
|
38
|
+
return locatorTarget.element.tagName.toLowerCase();
|
|
47
39
|
}, [locatorTarget]);
|
|
48
40
|
if (!mounted || !locatorTarget) return null;
|
|
49
41
|
const { rect } = locatorTarget;
|
|
50
|
-
const hasParents = locatorTarget.componentStack.length > 0;
|
|
51
42
|
const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
|
|
52
43
|
/* @__PURE__ */ jsx("style", { children: `
|
|
53
44
|
@keyframes uilint-locator-fade-in {
|
|
@@ -81,23 +72,13 @@ function LocatorOverlay() {
|
|
|
81
72
|
{
|
|
82
73
|
rect,
|
|
83
74
|
source: currentSource,
|
|
84
|
-
componentName: currentName
|
|
85
|
-
stackIndex: locatorTarget.stackIndex,
|
|
86
|
-
stackLength: locatorTarget.componentStack.length,
|
|
87
|
-
hasParents
|
|
75
|
+
componentName: currentName
|
|
88
76
|
}
|
|
89
77
|
)
|
|
90
78
|
] });
|
|
91
79
|
return createPortal(content, document.body);
|
|
92
80
|
}
|
|
93
|
-
function InfoTooltip({
|
|
94
|
-
rect,
|
|
95
|
-
source,
|
|
96
|
-
componentName,
|
|
97
|
-
stackIndex,
|
|
98
|
-
stackLength,
|
|
99
|
-
hasParents
|
|
100
|
-
}) {
|
|
81
|
+
function InfoTooltip({ rect, source, componentName }) {
|
|
101
82
|
const viewportHeight = window.innerHeight;
|
|
102
83
|
const spaceAbove = rect.top;
|
|
103
84
|
const spaceBelow = viewportHeight - rect.bottom;
|
|
@@ -133,36 +114,21 @@ function InfoTooltip({
|
|
|
133
114
|
pointerEvents: "auto"
|
|
134
115
|
},
|
|
135
116
|
children: [
|
|
136
|
-
/* @__PURE__ */
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
{
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
),
|
|
152
|
-
hasParents && /* @__PURE__ */ jsx(
|
|
153
|
-
"span",
|
|
154
|
-
{
|
|
155
|
-
style: {
|
|
156
|
-
fontSize: "10px",
|
|
157
|
-
color: STYLES.textMuted,
|
|
158
|
-
padding: "2px 6px",
|
|
159
|
-
backgroundColor: "rgba(59, 130, 246, 0.15)",
|
|
160
|
-
borderRadius: "4px"
|
|
161
|
-
},
|
|
162
|
-
children: stackIndex === 0 ? "element" : `parent ${stackIndex}/${stackLength}`
|
|
163
|
-
}
|
|
164
|
-
)
|
|
165
|
-
] }),
|
|
117
|
+
/* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs(
|
|
118
|
+
"span",
|
|
119
|
+
{
|
|
120
|
+
style: {
|
|
121
|
+
fontSize: "13px",
|
|
122
|
+
fontWeight: 600,
|
|
123
|
+
color: STYLES.accent
|
|
124
|
+
},
|
|
125
|
+
children: [
|
|
126
|
+
"<",
|
|
127
|
+
componentName,
|
|
128
|
+
" />"
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
) }),
|
|
166
132
|
source && /* @__PURE__ */ jsxs(
|
|
167
133
|
"div",
|
|
168
134
|
{
|
|
@@ -181,7 +147,7 @@ function InfoTooltip({
|
|
|
181
147
|
]
|
|
182
148
|
}
|
|
183
149
|
),
|
|
184
|
-
/* @__PURE__ */
|
|
150
|
+
/* @__PURE__ */ jsx(
|
|
185
151
|
"div",
|
|
186
152
|
{
|
|
187
153
|
style: {
|
|
@@ -194,13 +160,7 @@ function InfoTooltip({
|
|
|
194
160
|
paddingTop: "8px",
|
|
195
161
|
marginTop: "2px"
|
|
196
162
|
},
|
|
197
|
-
children:
|
|
198
|
-
/* @__PURE__ */ jsx("span", { children: "Click to open" }),
|
|
199
|
-
hasParents && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
200
|
-
/* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "\u2022" }),
|
|
201
|
-
/* @__PURE__ */ jsx("span", { children: "Scroll to navigate parents" })
|
|
202
|
-
] })
|
|
203
|
-
]
|
|
163
|
+
children: /* @__PURE__ */ jsx("span", { children: "Click to inspect" })
|
|
204
164
|
}
|
|
205
165
|
)
|
|
206
166
|
]
|